rem 移动端适配

时间 2019-11-26

标签 rem 移动适配栏目无线繁體版

原文原文链接

`rem`移动端适配：

在移动端（手机端、Pad端），设备尺寸良莠不齐。若是想要写完一套代码，可以在全部移动设备上都正常运行，那么采用原生的px单位来设置是不行的。举个例子：iPhone6的尺寸是375px，若是咱们想要一个盒子是占据整个宽度的一半，那么会将这个盒子的宽度设置为187.5px，可是并非全部手机的宽度都是375px，所以就会形成问题。这时候咱们能够经过rem来解决这个问题。css

什么是`rem`：

em：当前元素字体大小相对于父标签的字体大小。好比：
```
<div style="font-size:16px;">
     <span style="font-size:2em">你好</span>
 </div>
```
在div中字体大小是16px，而在span标签中由于用的是2em，所以是2倍的父标签字体的大小，也就是32px。
rem：跟em相似，只不过此时的参照元素不是父元素，而是根元素，也就是html元素的大小。好比：
```
<html style="font-size:14px">
     <div style="font-size:16px;">
         <span style="font-size:2rem">你好</span>
     </div>
 </html>
```
此时的span标签字体大小为html标签字体大小的2倍，也就是28px。

`rem`适配原理：

rem虽然自己是用来设置字体的大小，可是也能够延伸到设置其余属性的尺寸。利用rem咱们能够实现等比缩放。好比我将一个页面的宽度平均分红100份unit=windowWidth/100，而后让html的font-size等于unit，那么如下问题均可以实现：html

要实现浏览器一半的宽度，咱们就能够经过50rem来实现（rem是单位）。
设置字体大小为16px，转化成rem就是：(16/unit)rem。

在`Vue-cli`中实现`rem`布局：

在使用vue-cli建立的项目中，咱们能够经过一些第三方包来方便的实现rem的布局。要安装两个包，分别是：postcss-pxtorem、lib-flexible。安装命令经过npm install --save-dev postcss-pxtorem lib-flexible安装便可。在安装完包后，还须要配置两个地方：vue

package.json：

"postcss": {
     "plugins": {
       "autoprefixer": {},
       "postcss-pxtorem": {
         "rootValue": 37.5,
         "propList": [
           "*"
         ],
         "selectorBlackList": [
           "van-*"
         ]
       }
     }
   }

main.js：
```
 import "lib-flexible"
```

这样之后在写单位的时候，就不须要换算成rem，直接写px就能够，postcss-pxtorem会自动的将咱们写的px转化成rem。而lib-flexible会根据当前的尺寸，来调整html上的font-size进行适配。vue-cli

rem 移动端适配

rem移动端适配：

什么是rem：

rem适配原理：

在Vue-cli中实现rem布局：

`rem`移动端适配：

什么是`rem`：

`rem`适配原理：

在`Vue-cli`中实现`rem`布局：