How to configure rem in vue

Configuration of rem in vue

When developing mobile terminals, we often feel very uncomfortable because we cannot grasp the standards well, so we can use rem+flex. So how should we configure it in vue?

1. Configure in js

The code for creating a new src/utils/ is as follows:

const setFontSize = (minFontSize = 12, maxFontSize = 16) =&gt; {
    // 7.5 is obtained according to the horizontal resolution of the design draft / 100    var deviceWidth = ;
    // Get the browser width    if(deviceWidth &gt; 750) {
        // deviceWidth = 750;
        deviceWidth = 7.5 * 50;
    } else if (!deviceWidth) {
         return;
    }
    const fontSize = (minFontSize, (12 * (deviceWidth / 320), maxFontSize));
     = `${fontSize}px`;
    // Such a size of 1rem=font-size    // Of course, if you think the rem is too small in this way, you can recommend the second way of writing, which is relatively simple. The code is as follows (noted)     // Get the browser width    //if(deviceWidth &gt; 750) {
        // deviceWidth = 750;
        //deviceWidth = 7.5 * 50;
    //}
    //  = `${deviceWidth / 7.5}px`;
    // The fontSize size at this time is 50px (on the 375 screen)    //Don't double-click to enlarge    ('touchstart', function (event) {
        if ( &gt; 1) {
            ();
        }
    }, false);
    var lastTouchEnd = 0;
    ('touchend', function (event) {
        var now = ();
        if (now - lastTouchEnd &lt;= 300) {
            ();
        }
        lastTouchEnd = now;
    }, false);
}
export default {
    setFontSize ,
}

Then: Introduce it:

// Style adaptation processingimport Rem from './utils/rem';
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '&lt;App/&gt;',
  components: { App },
});
();

certainly! ! ! ! ! Don't forget to set the default size

Set the default size in asstes/

//Universal stylebody{
  font-family: "PingFangSC-Regular","PingFang SC","Lanting Black","Helvetica",sans-serif;
  color: @color-text;
  font-size: 14px;
  // font-sizt: 0.28rem; 375 screen  background-color: @color-background;
}

Remember to introduce it in

// Custom stylerequire('./assets/css/');
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '&lt;App/&gt;',
  components: { App },
});
();

2. With the help of the px2rem plug-in

Introduced

npm install  px2rem-loader  lib-flexible --save 
                      or
yarn add px2rem-loader lib-flexible --save

Introduce lib-flexible in project entry file

import 'lib-flexible/'

Under build, find the generateLoaders method and add it here.

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
  remUnit: 37.5
  }
}
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader]
 if (loader) {
   ({
   loader: loader + '-loader',
   options: ({}, loaderOptions, {
     sourceMap: 
   })
 })
}

Restart the project and you will find that the px you set has been converted to rem

The above implementation conversion is applicable to:

(1) The css written in the component

(2) Import ‘…/…/static/css/’ from or

(3) Introduce css in the component

Other cases do not apply:

(1) @import "…/…/static/css/ in the component (can consider the above form (2) and (3)))

(2) External style:

(3) Internal style of element: style=”height: 417px; width: 550px;”

vue-cli 3.0 px automatically converts to rem to mobile

1. Download postcss-pxtorem, lib-flexible

npm install lib-flexible --save-dev
npm install postcss-pxtorem --save-dev

2. Configuration

import 'lib-flexible/flexible' // pxAutomatically transferrem

3. Root path configuration

 = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      "rootValue": 75, // 1/10 of the width of the design draft,      "propList": ['*'],// Attributes that need to be converted, such as `high`, `width`, `margin`, etc., `*` means all    }
  }
}

The above is personal experience. I hope you can give you a reference and I hope you can support me more.