第一：百分比布局
第二：彈性盒子
第三：相對(duì)單位
移動(dòng)端適配
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
百分比 布局一
根據(jù)父節(jié)點(diǎn)的大小來(lái)計(jì)算 : %
練習(xí): 1：制作基本布局舅列，
2：制作響應(yīng)式圖片
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<style type="text/css">
*{padding: 0px;margin:0px;}
ul li{list-style: none;}
.warp{max-width: 768px;}
.warp ul{width:100%;}
.warp ul li{width: 33.33%;height:100px; float: left;}
.warp .lia{
background: blue;
}
.warp .lib{
background: red;
}
.warp .lic{
background:yellow;
}
</style>
</head>
<body>
<div class="warp">
<ul>
<li class="lia">111</li>
<li class="lib">22</li>
</ul>
</div>
</body>
</html>
效果圖
彈性盒子 布局二
css3彈性盒子
看看效果圖
注意：在你使用彈性盒子模型之前肌割，你必須先把父元素display屬性設(shè)置為box或inline-box后，該元素才具有彈性盒子模型帐要。
盒子的布局方向box-orient屬性
盒子的布局順序box-direction屬性
box-ordinal-group屬性
box-flex屬性
box-pack / box-align屬性取值
移動(dòng)端rem布局三
設(shè)置根元素
Javascript設(shè)置html元素
window.addEventListener("resize",function(){
document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/10+"px";
})
