vue adaptive PC terminal mobile terminal postcss-px-to-viewport

vue adaptive PC terminal mobile terminal postcss-px-to-viewport

1. build vue scaffolding

 npm install -g @vue/cli
 
 yarn global add @vue/cli
 

2. create a project

vue create  
 

Choose the way to build, choose the default built-in vue

3. install dependent packages

npm install postcss-px-to-viewport -D

yarn add postcss-px-to-viewport -D
 

4. create vue.config.js

1. Match the PC side

  module.exports = {
// extract   false  true  css  
    extract: IS_PROD,
    sourceMap: false,
    css: {
      loaderOptions: {
        postcss: {
          plugins: [
            require("postcss-px-to-viewport")({
              unitToConvert: "px",// "px"
              viewportWidth: 1920,// pc 1920
             //viewportHeight: 1080,// 
              unitPrecision: 3,// 
              propList: [
               // vw 
                "*",
              ],
              viewportUnit: "vw",// 
              fontViewportUnit: "vw",// 
              selectorBlackList: [],// CSS px cretae
              minPixelValue: 1,// 1 1 
              mediaQuery: false,// 
              replace: true,// 
              exclude:/(\/|\\)(node_modules)(\/|\\)/,//  'node_modules'  
            }),
          ],
        },
      },
    },
  };
 

2. Match the mobile terminal

module.exports = {
// extract   false  true  css  
extract: IS_PROD,
sourceMap: false,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px-to-viewport')({
            unitToConvert: 'px',// "px"
            viewportWidth: 375,// 375
           //viewportHeight:667,// 
            unitPrecision: 3,// 
            propList: [
             // vw 
              '*',
            ],
            viewportUnit: 'vw',// 
            fontViewportUnit: 'vw',// 
            selectorBlackList: [],// CSS px 
            minPixelValue: 1,// 1 1 
            mediaQuery: false,// 
            replace: true,// 
            exclude:/(\/|\\)(node_modules)(\/|\\)/,//  'node_modules'  
          }),
        ],
      },
    },
  },
};
 

5. start the project yarn serve to see the results

 
  https://juejin.im/post/6844904181942190093