vue cli3, Fit style to screen size
Recently I made a big screen , Considering that it's going to be on different displays , Display the same set of codes , So I thought of it , Ali's “lib-flexible”,
There is a lot of dry goods , Don't miss the details , No nonsense , Do it directly
1. Install the package that needs to respond
npm i lib-flexible -S
There will be changes in this bag , Let's sell it first , In the end, I will elaborate .
（2） Install the second package
npm i px2rem-loader -D
2. After installation, the package will be imported globally , stay main.js Add the following code to the
import 'lib-flexible'
3. stay vue.config.js Add the following code to the
css: { loaderOptions: { postcss: { plugins: [ require('postcss-px2rem')({
remUnit: 192 }) ] } }, },
It is worth noting that remUnit, This is the size of your design divided by 2, Divide by 10, But there is a point to be noted , When you're done lib-flexible Time , You need to fill in the 10 That's it .
4. modify lib-flexible.js,
Why change , You will find a problem , The mobile terminal is OK , however pc He's only about the right size 540,
So I found it in the installation package lib-flexible, In the bag lib-flexible.js file ,
The code is modified as follows
Before the change
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; }
After modification
function refreshRem(){ var width = docEl.getBoundingClientRect().width; if
(width / dpr > 540) { width = width * dpr; } var rem = width / 10;
docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }
That's to say 540 Change the width of the window to , The width of the current screen
5. How to update synchronously in the project after modification ?
Next, copy this file , put to lib Under the document
And then in the main.js in
hold import 'lib-flexible' Change to import './lib/lib-flexible',
This will synchronize all projects , No, everyone changed .
If this article helps you ,
Please make a fortune , comment , give the thumbs-up , forward , Collection , Or a reward
Technology
Daily Recommendation