昔洛 的个人博客

静态布局

即传统 Web 设计，网页上的所有元素的尺寸一律使用 px 作为单位

一、流式布局（百分比布局）

流式布局是：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。
网页中主要的划分区域的尺寸使用百分数（搭配 min-、max-属性使用）
布局特点：屏幕分辨率变化时，页面里元素的大小会变化但布局不变。
缺点明显：主要的问题是如果屏幕尺寸跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用 %百分比定义，但是高度和文字大小等都是用 px 来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显得非常不调谐。

二、flex 布局

CSS3 引入的，flex 布局：优点在于其容易上手，根据 flex 规则很容易达到某个布局效果，缺点则是浏览器兼容性比较差，只能兼容到 ie9 及以上。

三、自适应布局

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生变化），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。
可以把自适应布局看作是静态布局的一个系列。
布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

四、响应式布局

响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。 优点：适应pc和移动端，如果足够耐心，效果完美 缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

五、rem，em区别

rem，em都是顺应不同网页字体大小展示而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面跟元素。

六、rem与em、px的区别

• px：像素，比较精确的单位，但不好做响应式布局
• em：以父节点 font-size 大小为参考点，标准不统一，容易造成混乱
• rem：是始终相对于 html 大小，即页面根元素

七、响应式和弹性布局之间的对比

响应式布局：改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够耐心，在每一种屏幕下都应该有合理的布局，完美的效果。
rem布局：改变浏览器宽度，页面所有元素的高度都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。

结论：

• 如果只做 PC 端，那么静态布局（定宽度）是最好的选择；
• 如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份 css + 一份 js 调节 font-size 搞定；
• 如果 PC，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。