Scenario 1: Adapting to a Mobile Terminal Keep the scaling ratio unchanged for different mobile phone models
The adaptation scheme here is flexible. Js under lib-flexible of Taobao
1 the lib – flexible installation
npm i lib-flexible
Copy the codeNo more nonsense! You already know how flexible. Js works! [grinned], if you don’t understand please baidu | | Google. The general principle is to divide the design into 10 pieces based on the width of the design. Then set 1/10 of the size to the root node. One REM is 1/10 of the width! Yes, that’s right! His role is such a role (my personal understanding)
Font size: 37.5px (1rem) after importing flexble.js, we will check the code and the effect to verify this relationship
<! --html-->
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
Copy the code// scss
<style lang="scss">
.wrapper div {
height: 1rem;
}
.box1 {
width: 2rem;
background-color: coral;
}
.box2 {
width: 4rem;
background-color: skyblue;
}
.box3 {
width: 6rem;
background-color: palegreen;
}
.box4 {
width: 8rem;
background-color: wheat;
}
.box5 {
width: 10rem;
background-color: darkred;
}
</style>
Copy the code
vue.config.js
Then how do we keep up with the design if we don’t use any plugins? [head]
// the SCSS variable must be computed in the same unit, so it is difficult to write.
<style lang="less">
@375: 37.5rem;
.wrapper div {
height: 37.5/@ 375;
}
.box1 {
width: 75/@ 375;
background-color: coral;
}
.box2 {
width: 150/@ 375;
background-color: skyblue;
}
.box3 {
width: 225/@ 375;
background-color: palegreen;
}
.box4 {
width: 300/@ 375;
background-color: wheat;
}
.box5 {
width: 375/@ 375;
background-color: darkred; } < /style>
Copy the codeIn practice, this code has proved to have the same effect as the above, except that it is cumbersome to write and would not do so in a real project. So pX2REM-loader will be used next
2.0 installation px2rem – loader
npm i px2rem-loader -D
Copy the code2.1 configuration px2rem – loader
Do the configuration in vue.config.js. After the configuration, remember to restart the project for the configuration to take effect!
module.exports = {
.
.
.
chainWebpack: config= > {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/ \? vue/)
.use('px2rem')
.loader('px2rem-loader') // px2REm-loader only applies to CSS
.options({
remUnit: 37.5}})},Copy the codeIts function is to read the word as its name! [Wang Chai], here is an example of the above. Get remUnit set to post 37.5! It will automatically convert px to REM for you based on 37.5.
For example, if you set the width of a div to 37.5px, you get something like this
width: 37.5 px.;
/ / equivalent to the
width: 37.5 / @375;
// Final result:
width: 1rem;
Copy the code<style lang="scss">
.wrapper div {
height: 37.5 px.;
}
.box1 {
width: 75px;
background-color: coral;
}
.box2 {
width: 150px;
background-color: skyblue;
}
.box3 {
width: 225px;
background-color: palegreen;
}
.box4 {
width: 300px;
background-color: wheat;
}
.box5 {
width: 375px;
background-color: darkred;
}
</style
Copy the codeSo this is where you get what you want, you don’t have to worry about the transformation relationship. Px2rem-loader (px2REM-Loader, px2REm-Loader, px2REm-Loader) [Emmmmmmm] At this time you think you can set your mind at ease to go [wicked smile], the result Sue does not know here ‘pit’! Results:
So what is the ‘pit’? Actually, it is not a pit is px2rem – loader this plugin can only be limited to the CSS, that is to say, lang = ‘SCSS | | less’ type doesn’t support!
- The normal CSS does not have lang
- Set the lang = ‘less | | SCSS’
So is there a better solution? The answer is yes.
Disable px2REm-loader (delete px2REm-loader configurations) and use postCSs-plugin-px2REM
npm install postcss-plugin-px2rem --save-dev
Copy the codeOnce the dependencies are installed, you only need to configure two places and restart the project to oJbk!
vue.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem'({/** * conversion base, default 100. * Set the font of the root tag to 1rem${rootValue}Px ', * this will allow you to measure out the number of pixels from the design and write more px directly into the code. */ rootValue: 37.5, /** * defaultfalse/(node_module)\/ If you want to convert px in the front-end UI frame to REM as well, set this property to the default */ exclude: /(node_module)/, // (Boolean) allows conversion of PX in media queries. mediaQuery:false,}),]}}},}Copy the codemain.js
import 'lib-flexible' // select * from *
Copy the codepackage.json
{
"postcss": {
"plugins": {
"autoprefixer": {},
"precss": {}}}}Copy the codeScenario 2: How to Adapt to PC or iPad
Or based on the above analysis, first remove the mobile preview mode, open the browser mode
One problem we find when resizing the browser window is that the maximum font size of the root node is only 54px and does not change with the screen width. Font size for the root node should be 192px if the design was 1920px. Depend! It doesn’t make any sense. [Sneer][Sneer]
If you remember that flexible is used for mobile, you might have a problem adapting to non-mobile. Wang Chai [Wang Chai] look at the source
// flexible.js
// This article uses DPR as 1
function refreshRem() {
var width = docEl.getBoundingClientRect().width
if (width / dpr > 540) {
width = 540 * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
flexible.rem = win.rem = rem
}
Copy the codeIf width > 540, with does not change. To keep the root font size consistent with the design, change the 540 font size to dynamic
// flexible.js
function refreshRem() {
var width = docEl.getBoundingClientRect().width
if (width / dpr > width) {
width = width * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
flexible.rem = win.rem = rem
}
Copy the codeThen you start coding according to the design on your 1920px monitor, and it’s fun for a while, it’s fun for a while, it’s fun for a while, it’s fun for a while, it’s fun for a while, it’s fun for a while, and it’s fun for a while.
Turns out there’s a 21:9 (3440 x 1440) ultra-wide curved display at home, turns on your perfect product, and then something amazing happens!
Ah… it’s… hot in the eyes
Font is too big!! Bright blind my dog eyes [wang Chai] so here to change, let him in a certain range of self-adaptation, not in the scope of this regulation will not change with the screen, perfect ~
// flexible.js
function refreshRem() {
var width = docEl.getBoundingClientRect().width
// The screen stops getting bigger as it gets bigger after 1920px
if (width / dpr > 1920) {
width = 1920 * dpr
}
// When the screen is less than 1300px, it does not get smaller as the screen gets smaller
if (width / dpr < 1300) {
width = 1300 * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
flexible.rem = win.rem = rem
}
Copy the codeThe above is a general idea, because they are doing their own blog, just want to record the problems they encounter. Purely personal summary, may understand the discrepancy, hope to correct ~ I humbly accept. hahahaha
To summarize
flexible.js: Dynamically sets the font size of the root node based on the width of the screen (because REM is scaled based on the font size of the root node)- But by default, the maximum font size for the root node is 54px, so the screen width above 540px does not grow with increasing width. If you need to customize it, just change the source code
- If customized, it is suggested to copy his JS to their own projects
px2rem-loader: Convert PX to REM- Disadvantages: can only convert common CSS styles, if set lang = ‘less | | SCSS’, cannot be converted into rem
postcss-plugin-px2rem: Also converts PX to REM butmore.better[firewood]
Attached project information
{
"name": "kaka-blog"."version": "0.1.0 from"."private": true."scripts": {
"serve": "vue-cli-service serve --copy"."build:dev": "vue-cli-service build --mode development --report"."build:test": "vue-cli-service build --mode test --report"."build:prod": "vue-cli-service build --mode production --report"."lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^ 3.6.5." "."element-ui": "^ 2.13.2"."less-loader": "^ 6.1.1." "."lib-flexible": "^" 0.3.2."sass-loader": "^ 8.0.2." "."screenfull": "^ 5.0.2"."vue": "^ 2.6.11." "."vue-router": "^ 3.3.2 rainfall distribution on 10-12"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~ 4.4.0"."@vue/cli-plugin-eslint": "~ 4.4.0"."@vue/cli-service": "~ 4.4.0"."babel-eslint": "^ 10.1.0"."compression-webpack-plugin": "^ 4.0.0"."eslint": "^ 6.7.2." "."eslint-plugin-vue": "^ 6.2.2." "."github-markdown-css": "^ 4.0.0"."highlight.js": "^ 10.0.3"."node-sass": "^ 4.14.1." "."postcss-plugin-px2rem": "^ 0.8.1"."px2rem-loader": "^ 0.1.9"."speed-measure-webpack-plugin": "^ 1.3.3." "."terser-webpack-plugin": "^ 3.0.3." "."thread-loader": "^ 2.1.3"."uglifyjs-webpack-plugin": "^ 2.2.0." "."vue-loader": "^ 15.9.2"."vue-markdown-highlight": "^ 1.0.5." "."vue-markdown-loader": "^ against 2.4.1." "."vue-template-compiler": "^ 2.6.11." "."webpack": "^ 4.43.0"."webpack-bundle-analyzer": "^ 3.8.0." "
},
"eslintConfig": {
"root": true."env": {
"node": true
},
"extends": ["plugin:vue/essential"."eslint:recommended"]."parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-unused-vars": [
1,
{
"vars": "all"."args": "after-used"}}},"postcss": {
"plugins": {
"autoprefixer": {},
"precss": {}}}."browserslist": ["1%" >."last 2 versions"."not dead"]}Copy the code