Vue mobile terminal / PC terminal adaptive responsive layout solution (1)

Vue mobile/PC adaptation solution: postcss-px-to-viewport

illustrate:

There have always been many adaptation solutions on the mobile terminal and the PC terminal. This article mainly explains thepostcss-px-to-viewportImplement a responsive layout.

Install and configure:

1. Install with the following command:

npm install postcss-px-to-viewport -S

2. Create in the root directorypostcss.config.jsfile, and add the following location to the file:

module.exports = {
    
    
    plugins: {
    
    
        'postcss-px-to-viewport': {
    
    
            unitToConvert: 'px', // 需要转换的单位，默认为"px"
            viewportWidth: 1920, // 设计稿的视口宽度
            unitPrecision: 5, // 单位转换后保留的精度
            propList: ['*'], // 能转化为vw的属性列表
            viewportUnit: 'vw', // 希望使用的视口单位
            fontViewportUnit: 'vw', // 字体使用的视口单位
            selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
            minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
            mediaQuery: false, // 媒体查询里的单位是否需要转换单位
            replace: true, //  是否直接更换属性值，而不添加备用属性
            exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
            include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
            landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
            landscapeUnit: 'vw', // 横屏时使用的单位
            landscapeWidth: 1920 // 横屏时使用的视口宽度
        }
    }
} 

propList: When we do not want to convert the units of some attributes, we can add them after the array and add ! in front, such as propList: [“*”, “!letter-spacing”], which means: all css attributes The units of the attributes are all converted, except for letter-spacing.

selectorBlackList: Converted blacklist, we can write strings in the blacklist, as long as the class name contains this string, it will not be matched. For example, selectorBlackList: ['wrap'], which means that the unit of the class name such as wrap, my-wrap, wrapper will not be converted.

Compatible with third-party UI libraries

1. When we do mobile projects, we will use some third-party UI libraries, such as vant... At this time, you will find that the size of the vant components will be half smaller. That is because vant officially uses 375 design drafts, and you use 750. Dynamic judgment is fine
2. The function of the following code is mainly used to judge whether the read file is the file of ui library ant-design-vue. If so, the width of the viewport is set to 375, and the width of other files is 750 according to the width of the ui draft.

const path = require('path')

module.exports = ({
     
      file }) => {
    
    
  const designWidth = file.dirname.includes(
    path.join('node_modules', 'ant-design-vue')
  )
    ? 375
    : 750

  return {
    
    
    plugins: {
    
    
      autoprefixer: {
    
    }, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
      'postcss-px-to-viewport': {
    
    
        unitToConvert: 'px', // 要转化的单位
        viewportWidth: designWidth, // UI设计稿的宽度
        unitPrecision: 6, // 转换后的精度，即小数点位数
        propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: [], // 指定不转换为视窗单位的类名，
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
        exclude: [], // 设置忽略文件，用正则做目录名匹配
        landscape: false, // 是否处理横屏情况
        // replace: true, // 是否转换后直接更换属性值
      },
    },
  }
}

Re-run the project to trigger the configuration file to take effect

npm run serve
npm run dev

At this point, you will find that the configuration file has taken effect, and the px in the original code is automatically converted into the vw viewport unit in real time during the compilation stage, and the DOM elements are scaled proportionally to the viewport size.
This is an adaptation solution that the author has used before, and you can try it, and I will continue to share some more useful adaptation solutions with you.