流式布局（宽度自适应）
流式布局是宽度使用百分比代替固定宽度px，高度大多使用px来固定，因此在大屏幕手机下显示的效果会变成页面元素的宽度被拉长，高度和原来保持一致
优点：
可以很好的来解决自适应的问题
缺点：
1、实际显示的效果不友好,屏幕越大，宽度被拉的很长，容易变形
2、大量使用百分比布局，会出现兼容性问题
<style>
* {
margin: 0;
padding: 0;
}.box {
width: 50%;
height: 100px;
background-color: pink;
}img {
width: 50%;
height: 100px;
}
</style>
</head><body>
<div class="box"></div>
<img src="./images/Koala.jpg" alt="">
</body>
2、rem布局
-
rem是css3新增单位，它是相对于根元素的字号大小的单位
rem原理：
rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。
html {
font-size:100px; //1rem = 100px
}.box {
width:2rem;// 2*100 = 200px
height:3rem;//3*100 = 300px
font-size:1rem;//1*100 = 100px
}
-
rem布局的实现：
1、设置页面的viewport
2.动态计算并设置不同尺寸html的font-size属性
3.按照PC端布局方式正常布局，将px单位改为rem单位（较小 的长度比如1px的边框就不需要转换成rem,直接设置px）
优点：
1.适用于偏APP类型的移动端页面
2.有利于手机端各种机型的适配
3.减少代码的重复性
缺点：
1.必须通过js来动态控制根元素的大小
83
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
