布局的分类
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样式,并且样式里面采用的都是百分比