rem mobile terminal adaptation:
On the mobile terminal (mobile terminal, Pad terminal), the device size varies Uneven. If you want to write a set of code that can run normally on all mobile devices, then the native px unit will not work. For example: the size of iPhone6 is 375px, if we want a box to occupy half of the entire width, then the width of this box will be set to 187.5 px, but not all mobile phones have a width of 375px, which can cause problems. At this time, we can use rem to solve this problem.
What is rem:
em: The font size of the current element is relative The font size of the parent label. For example:<div style="font-size:16px;">
<span style="font-size:2em">Hellospan>
div>The font size in
divis16px, and inspan< The /code> tag uses2em, so it is twice the size of the parent tag font, which is32px.rem: Similar toem, except that the reference element at this time is not the parent element, but the root element, which ishtml< /code>The size of the element. For example:<html style="font-size:14px" >
<div style="font-size:16px;">
<span style="font-size:2rem">Hellospan>
div>
html>The font size of the
spantag at this time is twice the font size of thehtmltag , Which is28px.
rem adaptation principle:
rem although it is It is used to set the size of the font, but it can also be extended to set the size of other attributes. Using rem we can achieve proportional scaling. For example, I divide the width of a page evenly into 100 copies of unit=windowWidth/100, and then let the font-size of html code> is equal to unit, then the following problems can be achieved:
- To achieve half the width of the browser, we can use
50remto Realization (remis the unit). - Set the font size to
16pxand convert it torem:(16/unit)rem.
Implementing rem layout in Vue-cli:
< p>In projects created with vue-cli, we can easily implement the layout of rem through some third-party packages. To install two packages, they are: postcss-pxtorem and lib-flexible. The installation command can be installed via npm install --save-dev postcss-pxtorem lib-flexible. After installing the package, two more places need to be configured:
package.json:"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
],
"selectorBlackList": [
"van-*"
]
}
}
}main.js:import "lib-flexible"
So when writing units in the future, you don’t need to convert to rem, just write px directly, postcss-pxtorem will automatically convert the px we wrote into rem. And lib-flexible will adjust the font-size on html according to the current size for adaptation.
<div style="font-size:16px;">
<span style="font-size:2em">Hellospan>
div>
<html style="font-size:14px">
<div style="font-size:16px;">
<span style="font-size:2rem">Hellospan>
div>
html>
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
],
"selectorBlackList": [
"van-*"
]
}
}
}
import "lib-flexible"