3.1 流式布局（宽度自适应）
流式布局是宽度使用百分比代替固定宽度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>
<divclass="box"></div>
<imgsrc="./images/Koala.jpg"alt="">
</body>
3.2 rem布局
rem是css3新增单位，它是相对于根元素的字号大小的单位
rem原理：
rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。
在布局过程中只要使用 rem 设置元素的尺寸，在改变 rem 的基准值 html 的字体大小的时候，页面上的元素将等比例缩放实现适配。
比如说 html 的 font-size 大小为 100px, 一个 div 的 width 为 1rem，则 div 的 width大小为100px
相对单位 : rem </
最低0.47元/天 解锁文章
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
