第一：百分比布局
第二：弹性盒子
第三：相对单位
移动端适配
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
image.png
百分比 布局一
根据父节点的大小来计算 : %
练习: 1：制作基本布局，
2：制作响应式图片
<!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>
效果图
image.png
弹性盒子 布局二
image.png
image.png
css3弹性盒子
看看效果图
image.png
image.png
注意：在你使用弹性盒子模型之前，你必须先把父元素display属性设置为box或inline-box后，该元素才具有弹性盒子模型。
盒子的布局方向box-orient属性
image.png
盒子的布局顺序box-direction属性
image.png
box-ordinal-group属性
image.png
box-flex属性
image.png
box-pack / box-align属性取值
image.png
移动端rem布局三
image.png
设置根元素
Javascript设置html元素
window.addEventListener("resize",function(){
document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/10+"px";
})
网友评论