1 rem与em
rem单位：指的是html元素的font-size的倍数。和em关注父元素不同，rem只关注根元素(html)
<html>---font-size: 20px; 这个就是基准字号
<body>---font-size: 2rem; 计算后是40px，不看父亲只看根
<div>----font-size: 2rem; 计算后是40px，不看父亲只看根
<p>----font-size: 2rem; 计算后是40px，不看父亲只看根
<span>----font-size: 2rem; 计算后是40px，不看父亲只看根
em是相对于父元素的字号
2 rem布局
rem布局的本质是等比缩放，一般是基于视口宽度
rem布局原理：假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x=屏幕宽度/100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比p{width:50x}
如果子元素设置rem单位的属性，通过更改html元素的字体大小，就可以让子元素实际大小发生改变。
如果让html元素字体的大小，恒等于屏幕宽度的1/100，那1rem和1x就等价了
css提供了vw和vh，可以表示x单位：1vw=1x
vw--视口宽度的1/100 vh--视口宽度的1/100
3 宽度标准化
根据效果图的宽度计算rem太烦琐了，如果1rem与1px恒等就好了。
工作中，移动端设计师通常为我们提供宽度为320px的设计图。
为了让1rem代表1px，我们常常将html根元素的字号定义为100/320vw
即：html{
font-size: 0.3125vw;
}
此时在标准设计图中，1rem=1px
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
html {
font-size: 0.3125vw;
}
.container {
width: 310rem;
margin: 0 auto;
}
.list {
margin-right: -5rem;
}
.box {
width: 100rem;
height: 50rem;
background-color: pink;
margin-right: 5rem;
margin-bottom: 5rem;
float: left;
}
.big {
height: 105rem;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="list">
<div class="box big">111</div>
<div class="box">222</div>
<div class="box">333</div>
<div class="box">444</div>
<div class="box">555</div>
</div>
</div>
</body>
</html>
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
