本教材由知了传课辛苦制作而成,仅供学习使用,请勿用于商业用途!如进行转载请务必注明出处!谢谢!

rem移动端适配:

在移动端(手机端、Pad端),设备尺寸参差不齐。如果想要写完一套代码,能够在所有移动设备上都正常运行,那么采用原生的px单位来设置是不行的。举个例子:iPhone6的尺寸是375px,如果我们想要一个盒子是占据整个宽度的一半,那么会将这个盒子的宽度设置为187.5px,但是并不是所有手机的宽度都是375px,因此就会造成问题。这时候我们可以通过rem来解决这个问题。

什么是rem

  1. em:当前元素字体大小相对于父标签的字体大小。比如:
    <div style="font-size:16px;"> <span style="font-size:2em">你好</span> </div>
    div中字体大小是16px,而在span标签中因为用的是2em,因此是2倍的父标签字体的大小,也就是32px
  2. 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我们可以实现等比缩放。比如设计师给的UI设计图是按照750px尺寸的,我们可以给htmlfont-size100px,那么以后我想实现一个32px的大小,转化成rem就是0.32rem。这样写是没有问题的,但是如果用户现在的手机不是750px的,而是375px的,这时候直接写个0.32rem不是会有问题吗?目前这样来说是有问题,但是我们只需要设置htmlfont-sizewindowWidth/750*100,在这个公式中将windowWidth换算成375px,结果为50px,那么用0.32rem后的px16px,正好是750px尺寸的一半,达到了缩小一倍的效果。

Vue-cli中实现rem布局:

在使用vue-cli创建的项目中,我们可以通过一些第三方包来方便的实现rem的布局。要安装两个包,分别是:postcss-pxtoremlib-flexible。安装命令通过npm install --save-dev postcss-pxtorem lib-flexible安装即可。在安装完包后,还需要配置两个地方:

  1. package.json
    "postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 37.5, "propList": [ "*" ], "selectorBlackList": [ "van-*" ] } } }
  2. main.js
    import "lib-flexible"

这样以后在写单位的时候,就不需要换算成rem,直接写px就可以,postcss-pxtorem会自动的将我们写的px转化成rem。而lib-flexible会根据当前的尺寸,来调整html上的font-size进行适配。而其中的37.5则根据设计师设计图的尺寸来,比如设计师是用375px的尺寸来设计的,那么就是375/10

1009人已阅读,今天你学习了吗?

添加新回复