当前位置：网站首页>VW VH adaptation of mobile terminal

VW VH adaptation of mobile terminal

2022-06-25 10:53:00 【Stranger & love sorrow】

What is? vw vh

It belongs to a new mobile terminal layout configuration , Function and rem similar

vw The maximum width of the viewport ,1vw Equal to onepercent of the viewport width

vh Maximum height of the viewport ,1vh Equal to onepercent of the viewport height

How to automatically adapt vw vh

Installation dependency


npm install postcss-px-to-viewport -D

modify .postcssrc.js

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-px-to-viewport': {
      viewportWidth: 375, //  The width of the window , It corresponds to the width of our design , It's usually 750
      unitPrecision: 3, //  Appoint `px` The number of decimal places to convert to the value of the window unit （ A lot of times it's not divisible ）
      viewportUnit: 'vw', //  Specifies the window units to convert to , It is recommended to use vw
      selectorBlackList: ['.ignore', '.hairlines'], //  Specifies a class that is not converted to a window unit , You can customize , You can add unlimited , It is recommended to define one or two common class names 
      minPixelValue: 1, //  Less than or equal to `1px` Do not convert to window units , You can also set it to the value you want 
      mediaQuery: false //  Allow conversion in media queries `px`
    }
  }
}