remMobile terminal adapter:
In the mobile terminal (mobile terminal, Pad side), uneven size of the apparatus. If you want to finish a set of code that can run properly on all mobile devices, the use of native pxunits set up is not enough. For example: iPhone6the size 375px, if we want a box that occupies half of the width, then the width of the box will be set 187.5px, but not all mobile phones are the width 375px, so it will cause problems. At this time we can remsolve this problem to.
What is rem:
em: The current element font size font size relative to the parent label. such as:<div style="font-size:16px;"> <span style="font-size:2em">你好</span> </div>
Indivthe font size16px, and thespanlabel is used because2em, thus twice the parent tag font size, is32px.rem: Withemsimilar, but this time the reference element is not a parent element, but the root element, which is thehtmlsize of the element. such as:<html style="font-size:14px"> <div style="font-size:16px;"> <span style="font-size:2rem">你好</span> </div> </html>
At this point thespanlabel font size ishtmltwice the size of the font tag, that is28px.
remAdaptation principle:
remAlthough it is used to set the font size, but may extend to other properties of the set size. Use remwe can achieve geometric scaling. For example, I will be the average width of a page is divided into 100parts unit=windowWidth/100, then let html's font-sizeequal unit, then the following problems can be achieved:
- To achieve half the width of the browser, we can
50rembe achieved (rema unit). - Set the font size is
16pxconverted intoremthat:(16/unit)rem.
In the Vue-cliimplementation remlayout:
In the use of vue-cliproject creation, we can through some third-party packages to facilitate the realization remof the layout. To install two packages, postcss-pxtoremnamely: lib-flexible, . Install command npm install --save-dev postcss-pxtorem lib-flexibleto install. After installing the package, also you need to configure two places:
package.json："postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 37.5, "propList": [ "*" ], "selectorBlackList": [ "van-*" ] } } }
main.js：import "lib-flexible"
So that later when writing unit, you do not need to be converted into rema direct write pxon it, postcss-pxtoremautomatically we will write pxconverted into rem. And lib-flexiblebased on the current size, to adjust htmlthe font-sizeadaptation.