⑥ 使用vw+rem做移动端适配
前言
首先你要知道 vw 和 rem 是什么?怎么使用?
-
简单来说
vw
是视口单位,相当于把视口等分成了100,1vw = 1; -
rem
是相对单位,设置根元素 html 的 font-size
- 比如给 html 设置字体大小为10px,1rem = 10px;
正文
-
我们以 iPhone6为基准,屏幕宽度为375px,然后换算成 vw
- 注:vw 是视口单位,被均分成了100,1vw = 1,所以根据上面计算,
1vw = 3.75px
375px = 100vw --> 1vw = 3.75px;
- 注:vw 是视口单位,被均分成了100,1vw = 1,所以根据上面计算,
-
一般使用 rem 会给 html 的
font-size=10px
,因为方便计算,这里需要把10px 换算为 vwpx -> vw = 100px/3.75px = 2.66vw
应用
定义变量
$rem = 20rem
为什么是20rem?
-
根元素
font-size=10px
,即元素1rem=10px
,所以元素1px=1/10rem
-
设计稿一般宽为750px,是iphone6宽度的两倍,所以
元素px = 设计稿px/2
-
综上所述,
设计稿px/20rem=实际px
栗子
$rem: 20rem;
.main {
box-sizing: border-box;
min-height: 100vh;
padding: 32/$rem;
background: #58bc58;
}