Sample code for implementing PC resolution adaptation in Vue

plan

• lib-flexible + px2remLoader
• lib-flexible : Alibaba's scalable layout solution
• px2rem-loader : px to rem

Install Dependencies

npm install px2rem-loader -D
npm install lib-flexible -S

Introducing dependencies

main.js imports lib-flexible

import 'lib-flexible'

Convert px to rem

options of vue-loader and other style file loader are ultimately generated by the methods in build/utils.js . We only need to add a px2remLoader after cssLoader . The remUnit option of px2rem-loader means 1rem = how many pixels. Combined with the solution of lib-flexible , we set options.remUnit of px2remLoader to 1/10 of the width of the design draft. Here we assume that the width of the design draft is 1920px

Add px2remLoader in build/utils.js

const cssLoader = {
    loader: 'css-loader',
    options:
      sourceMap: options.sourceMap
    }
  }

  // Add code, px to rem configuration (need to add px2remloader to the loaders array)
  const px2remLoader = {
    loader: 'px2rem-loader',
    options:
      remUnit: 192, //According to the visual draft, rem is one tenth of px, 1920px 192 rem
      // remPrecision: 8 // How many decimal places are retained in the converted rem}
  }

Put it in the loaders array

// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
   const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

   if (loader) {
     loaders.push({
       loader: loader + '-loader',
       options: Object.assign({}, loaderOptions, {
         sourceMap: options.sourceMap
       })
     })
   }
   //...
 }

Modify flexible.js

Global search for flexible.js

Modify the code to suit the PC side

function refreshRem(){
   var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = width * dpr;
    }
    //Scaling ratio, can be modified according to actual situation var rem = width / 8;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

For styles that you do not want to be converted, you can add /*no*/ after them to ensure that they are not converted.

Reference blog

VUE PC-side adaptation solution flexible + px2remLoader感謝大佬
Vue realizes PC resolution adaptation感謝大佬

This concludes this article about the sample code for Vue's PC-side resolution adaptation. For more information about Vue's PC-side resolution adaptation, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!