Example code for implementing large screen adaptation on PC using vue+px2rem (rem adaptation)

Configuration Preface

Project construction: built based on vue-cli3, using postcss-px2rem px2rem-loader for rem adaptation

Implementation principle: Every time we package, webpack automatically converts px units into rem units by using the plug-in postcss-px2rem

px2rem is a plug-in that automatically converts px to rem, helping developers reduce the calculation process of mutual conversion between pixels.

There is a pit ahead: some components of the UI framework use JavaScript to write CSS as inline styles directly in HTML tags. The relevant CSS will not be read during packaging and adaptation, so you need to configure the relevant styles, and "!important" is required in the style to override the style.

Implementation steps

The first step is to install postcss-px2rem and px2rem-loader

Open the command line tool and enter the following command to install the plug-in (of course, it will be faster to install it using the Taobao mirror cnpm)

npm install postcss-px2rem px2rem-loader --save

The second step is to create a new rem.js file in the util directory in the root directory src.

// rem proportional adaptation configuration file // Base size const baseSize = 16
// Set rem function function setRem () {
  // The scaling ratio of the current page width relative to 1920 width, which can be modified according to your needs.
  const scale = document.documentElement.clientWidth / 1920
  // Set the font size of the root node of the page ("Math.min(scale, 2)" means the maximum magnification ratio is 2, which can be adjusted according to actual business needs)
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// Initialize setRem()
// Reset rem when changing window size
window.onresize = function () {
  setRem()
}

The third step is to introduce the adapter file in main.js

import './util/rem'

Step 4: Configure the plugin in vue.config.js

// Import the proportional adaptation plug-in const px2rem = require('postcss-px2rem')

// Configure the basic size const postcss = px2rem({
  // Base size baseSize, needs to be the same as in rem.js remUnit: 16
})

// Use the proportional adaptation plugin module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

Summarize

This is the end of this article about vue+px2rem to achieve large-screen adaptation on PC. For more relevant vue+px2rem large-screen adaptation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!