For vuE3. X, it is the best fit

Vw and vh, based on viewport. 1vw and 1vh are 1/100th of window.innerWidth and window.innerHeight, respectively.

The installation

Command line input:

yarn add postcss-px-to-viewport Copy the code

or

npm i postcss-px-to-viewport -save -devCopy the code

configuration

In package.json, add code to postcss:

"postcss": {
    "plugins": {
        "autoprefixer": {},
        "postcss-px-to-viewport": {
            "viewportWidth": 750,
            "minPixelValue": 1}}},Copy the code

Configuration items:

"viewportWidth": 750, // Width of the design draft"unitPrecision": 3, // The number of digits reserved for the decimal point after the conversion of px to vw and vh"minPixelValue": 1, // does not convert to the minimum px value of vwCopy the code

Usage scenarios

Vw and VH will produce effects on both PC and mobile terminals, unlike flexible, which will only convert THE PX of devices with a certain width (remember it is 750px) to REM. Therefore, if the design draft is made for mobile terminals, the full use of VW unit will lead to excessive fonts and other phenomena on the PC side of the page, which should be handled according to the application scenario

compatibility

The vw/ VH unit actually appeared earlier, but it was not well supported in the past. Now with the development of browsers, most browsers (more than 92%) already support VW/VH.