静态布局、流式布局、自适应布局、响应式布局

布局

rem,em,px,百分比的区别：

rem,em都是顺应不同页面字体大小展现产生的改变。

em是相对其父元素的字体大小，会继承父级元素的字体大小。

rem相对html的字体大小，即页面根元素的字体大小。

px：像素，比较精确的单位，但对响应式布局不友好。

百分比：继承的是父级的width和height的属性

使用em，rem进行布局，相对100%更加灵活，同时可以支持浏览器的字体大小调整和缩放等正常显示。

支持rem的浏览器有Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE 9+。

静态布局

传统web设计，元素尺寸一律使用px做单位。

特点：不论页面大小怎么改变，页面中的内容始终保持特定的大小，最初所写的布局显示。

一般使用min-width定宽，当小于这个宽度时则会出现滚动条。

在移动端开发中使用静态布局的两种方式：

1. 在viewport的meta标签中设置width=320，页面的各个元素均采用px作为单位。通过JS动态修改initial-scale的值，使页面始终等比例缩放，从而刚好占满整个屏幕。
2. 设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。

流式布局

页面元素的宽度按照屏幕的分辨率进行适配调整，但整体布局不变。图片也作类似处理，当你改变浏览器的宽度，显示区域也会如同水流般自适应于显示器的宽度显示。

​ 页面中主要划分区域的尺寸使用百分数（搭配min-xx、max-xx属性使用），例如设置网页的主体宽度为80%，min-width为960px。

特点：屏幕分辨率变化时，页面里元素的大小会变化，但布局不变。

缺点：如果屏幕尺寸跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。大屏幕下某些页面元素宽度会被拉的很长，但是高度和元素大小还是和原来的一样，显示非常不协调。

自适应布局

分别为不同的屏幕分辨率定义不同的布局，创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。通过改变屏幕的分辨率，切换不同地布局。

特点：屏幕的分辨率变化，页面里的元素位置会变化但大小不会变化

方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。

响应式布局

响应式的目标是确保一个页面在所有终端上都能显示令人满意的效果，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

响应式布局与自适应布局的区别：响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。

方法：通常使用 @media媒体查询+网格系统（Grid）配合完成

特点：屏幕的分辨率变化，页面里的元素位置、大小会变化

CSS编写者常常把body元素的font-size设置为62.5%（浏览器默认字体大小16px*62.5%=10px），这样1em便是10px，但是不能直接将body元素的font-size设置为10px，因为有些浏览器默认不是16px。

参考文章：

《响应式布局和自适应布局详解》
《详解meta-viewport标签中的width和initial-scale属性》