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
©2020 ioDraw All rights reserved
【webpack】DLL plugin Principle analysis Combined with source code Transformer The most comprehensive , The deepest analysis filemanager-webpack-plugin Turn resources into zip Package and archive JavaScript study ( Function declaration and parameters ) mean value - Implementation and application of variance model _python_ Data analysis _9JAVA Snake games ( Source code + notes )SpringBoot integrate Redisson Implement delay queue python code , Easy to complete Snake games Thread.setDaemon Set up the Daemons Unity Code dynamic creation of preform in editor expansion function