This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The VUE project ADAPTS to a variety of SCREEN resolutions on PC

In the PC project development, it is necessary to apply to various screen resolutions of PC terminal, and the mobile terminal also needs to adapt to a variety of resolutions. Now we introduce a way to use lib-flexible and PX2REM-Loader to carry out operation adaptation. Lib-flexible is an adaptive plug-in developed by Taobao. It is open source and suitable for developers to use. Px2rem-loader uses rem units for pages, but px units for fonts.

Here’s our basic hype and some configuration changes

1. Install the plug-in first

npm install px2rem-loader
npm install lib-flexible
Copy the code

2. Add the utils. Js file in the build file

/ / 1
const px2remLoader = {
    loader: 'px2rem-loader'.options: {
      remUnit: 192
      / / a rem = = 192 px}}/ / 2
 const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]
Copy the code

The following

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader'.options: {
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader'.options: {
      remUnit: 192
      / / a rem = = 192 px}}const postcssLoader = {
    loader: 'postcss-loader'.options: {
      sourceMap: options.sourceMap
    }
  }

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

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

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'.publicPath: '.. /.. / '})}else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')}}Copy the code

3. Introduce lib-flexible in main.js

import 'lib-flexible'
Copy the code

4. Find the lib-flexible.js file in the lib-flexible directory of node_modules and modify it

 把54Change the widthfunction refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 54 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } tofunction 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;
    }
Copy the code

5. After installing this plug-in, it may cause some of the previous CSS style discovery changes. The UI page is directly distorted, so be careful