html中的布局主要由静态布局、自适应布局、流式布局以及响应式布局几类，简单比较以下这几种布局的区别和特点。 一 静态布局（Static Layout） 表现：在传统web设计中，不管浏览器尺寸具体大小多少，网页的布局会一直按照最开始的布局来显示。 特点：固定死宽高。 二 自适应布局（Adaptive Layout） 表现：就是为了不同屏幕的分辨率来定义不同的布局，并且在每个布局中的页面元素不随着窗口的大小变化而改变。 特点：自适应布局可以看做是静态布局的一个系列，即元素的位置随着网页大小发生变化而元素的大小不变。 三 流式布局（Liquid Layout） 表现：实质是百分比布局，只有一套布局，页面元素会随着窗口大小变化而改变。 特点：当窗口变得过小或过大，页面元素就不能正常显示。 1 百分比的特点 尺寸百分比：如width = 20%； 位置百分比：如left = 30%； 2 单位 1）em：参考点继承于父级字体大小 例如： <div style = “font-size:14px;”>
<div style = “font-size:2em”></div><!—字体继承父级为28px-->
</div>
2）rem；相对于（root根元素）html元素设置的字体大小 确定rem的三个步骤： a:确定基数，一般为10px； b:html{font-size:百分数} 基数 = 百分数*16 如：百分数为62.5% 基数 = 62.5*16= 10px = 1rem c:将px换算成rem公式：px值/基数 如：html的font-size =62.5%，则可以确定基数为10px，若给浏览器设置的字体为20px，换算成rem值为20/10 = 2rem。 例如： <html style="font-size: 62.5%;">
<body>
<div style="font-size: 3rem;"></div><!--3rem=30px-->
</body>
</html>
注意：谷歌浏览器下小于12px的字体会失效，则最终显示默认字体大小为12px，但是在火狐浏览器下能够正常显示； 兼容性问题：IE6，7，8不支持em或rem，其他浏览器都支持。 四 响应式布局 表现：针对不同的屏幕分辨率设置不同的布局，同时每一种布局中用到流式布局，即页面大小会随着窗口大小的改变而自动适配，能使一个网站兼容多个终端。 特点：响应式布局跟自适应布局原理一样，都是检测设备，根据设备不同分辨率来设置不同的CSS样式，并且样式里面都采用的是百分比，而不是自适应布局里面的固定宽高。