css常见布局

常见的布局有静态布局，流式布局，自适应布局，响应式布局，弹性布局。

静态布局

简介

网页上的所有尺寸都使用px作单位。不管浏览器的尺寸有什么变化，网页都会按照最除写代码的布局展示。在PC端时，这种网页会往往会设置min-width当浏览器的宽高小于这个宽度时，出现滚动条，保证网页的完整性。大于这个宽度时设置页面内容居中两边留白。

设计方式

PC：居中，两边留白。浏览器视口小于min-width或min-height，使用滚动条来查阅被遮掩部分。

移动设备：单独建立网站，单独设计布局。也可以设置viewport meta标签上content的width为640，因为超出了移动端浏览器的视口大小，所以浏览器会自动缩放到可以全屏显示。

优缺点

• 优点：容易编写，不用考虑不同分辨率的兼容性问题。
• 缺点：不能适配其它设备。

应用场景

1. PC门户网站
2. 宣传页面

静态

流式布局

简介

流式布局的页面元素会根据屏幕分辨率进行适配，但是基本布局不会有变化。一般是定高使用百分比宽度，同时搭配max-*,min-*使用防止图片或者一些特定的元素过度变形。多在分辨率变化不大的情况下使用。

优缺点

• 优点：在分辨率变化不大的情况下很好用。
• 缺点：由于定高宽度使用百分比，所以遇到宽屏手机时，会出现元素变形严重的情况。

应用场景

1. 纯移动端页面（商城，微信小程序）
   流式布局（mobile）

自适应布局

简介

自适应布局就是分别为不同分辨率的屏幕定义布局，即创建多个静态布局。改变屏幕分辨率就可以切换到不同的布局，但是在一个分辨率范围中调整屏幕分辨率不会影响元素的大小。可以将自适应布局看作静态布局的一种。

响应式布局

简介

响应式设计的目标在于PC，手机，平板等不同的设备都能获得良好的体验。响应式布局根据浏览器视口的变化，元素的大小位置都会发生变化。可以将响应式布局看作流式布局+自适应布局。

应用场景

中小型的门户或者博客类站点（不需要经常改动的）。

弹性布局

简介

通过使用rem实现等比缩放，完全还原设计稿。

应用场景

活动页面。