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>