布局的分类
a.静态布局:限制死宽高的网站
传统web设计，不管浏览器具体是多少，网页的布局就一直会按照最开始的布局来显示。
特点：固定死宽高。
b.自适应布局:根据不同显示分辨率各设置一套样式，让元素的大小不变 位置可变(但是如果继续缩小 该页面还是会出现滑动条，样式是固定px 没用百分比)
定义：就是为不同的屏幕分辨率来定义不同的布局，并且在每个布局中页面元素不随窗口的大小而改变。
其实质可以看做是静态布局的一个系列。也就是你看到的页面，页面的元素位置会发生变化，而大小不会发生变化
c.流式布局
定义：实质就是百分比布局，只有一套布局，页面元素会随着大小而改变。
缺点：当窗口变得过小或者过大，页面里面的元素就不能正常显示了。
百分比：
1.尺寸百分比 如：width：20%；
2.位置百分比 如：left：30%；
单位采用是相对单位:em/rem;
em:em会继承于父级字体大小
rem:是相对于html元素设置的字体大小
<span style="white-space:pre"> </span><div style="font-size: 14px;">
<div style="font-size: 2em;"></div> <!--字体28px-->
</div>
<html style="font-size: 62.5%;">
<body>
<div style="font-size: 3rem;"></div><!--这里字体大小为30xp-->
</body>
</html>
使用rem的三个步骤：
1.确定基数：一般是10px
2.html{font-size:百分数;};百分数=基数/16;
基数是10 百分比为:62.5%
基数是14 百分比:87.5%
16px=1rem;
3.px换算成rem 公式=换算的px值/基数
如果html{font-size:62.5%;};如果给这个容器设置的字体为20px,则换算成rem数值为20/10=2rem
注意：在谷歌浏览器下小于12px的字体会失效，则最终显示还是默认最小字体12px
兼容性问题：
IE6,7,8不支持em或rem,其他浏览器都支持
d.响应式布局=自适应布局+流式布局
定义：为不同的屏幕分辨率设置不同的布局，同时在每一种布局中用到流式布局，即首页面的大小会随着窗口大小的改变而自动适配。能够使一个网站能够兼容多个终端。
实质：响应式布局跟自适应布局原理是一样的，都是检测设备，根据不同的设备分辨率来设置不同的css样式，并且样式里面采用的都是百分比
1096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
