vw/vh

Vw/VH units can be adapted to computer browsers.

  • vw— 1/100 width of viewport;
  • vh— 1/100 of viewport height

On the PC, the viewport width is the width of the browser.

Vw/vh definition

Css3 introduced a new unit vw/vh related to the view window, vw denotes the width relative to the view window, vh denotes the height relative to the view window, in addition to vw and Vh, there are two related units vmin and vmax. The specific meanings of each unit are as follows:

So here we see that the window width and height are all 100 VWS over 100vh, so vw or vh, vh for short, is very similar to the percentage units. The difference between VW and % is:

From the comparison, we can see that VW units are similar to percentages, but different. It is difficult to convert the percentage units, and vw here is more like “ideal percentage units”.

For any level element, 1vw is equal to 1/100th of the view width in vw units.

Vw unit conversion

To convert PX to VW units, just determine the window size of the view (layout viewport) if we set the layout viewport to the resolution size. For example, for iphone6/7 with 375*667 resolution, px can be converted to VW in the following way:

1px is 1/375 times 100 vwCopy the code

Postcss-px-to-viewport can automatically convert PX to VW by preprocessing CSS using postCSS plug-ins. The default parameter postcss-px-to-viewport is:

var defaults = { viewportWidth: 320, viewportHeight: 568, unitPrecision: 5, viewportUnit: 'vw', selectorBlackList: [], minPixelValue: 1, mediaQuery: false };Copy the code

Px can be converted to VW by specifying the width and height of the window, as well as the conversion accuracy.

Compatibility of VW/VH units

You can click here to see how each browser version supports VW units.

As you can see, the vast majority of browsers support VW units.

Vw/vh application

First, introduce plug-ins into your project

npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev
npm i postcss-px-to-viewport-opt
Copy the code

Then create postcss.config.js under the root directory

module.exports = { plugins: { "autoprefixer": { path: ['./src/*'] }, "postcss-import": {}, "postcss-px-to-viewport-opt": {"viewportWidth": "1920", // The width of the window corresponds to the width of our design "viewportHeight": "1080", // Window height "unitPrecision": 2, // specifies the decimal number of Windows unit values to convert 'px' to (many times not divisible) "viewportUnit": "Vw ", // specify the window unit to be converted to, recommend using vw" selectorBlackList": ['#nprogress'], // specify the class "minPixelValue" that is not converted to the window unit: 1, / / less than or equal to 1 px ` ` don't convert window unit "mediaQuery" : false, / / allow the conversion in the media query ` px ` / / "exclude" : / / (\ | \ \) (node_modules) (\ | \ \) /},}};Copy the code

Then restart the project and write to the page

.icon{ color: $defaultColor; font-size: 26px; }Copy the code

The actual compilation result is as follows:

This allows you to adapt the font size to the width and height of the browser page.

Problems encountered using pseudo-class selectors when vH downloads the plug-in postCSS-viewport-Units

<! Postcsrc. Js -->module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json // "autoprefixer": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { utf8: false }, "postcss-cssnext": {}, "postcss-px-to-viewport": {// The width of the window corresponds to the width of our design. The width of the mobile terminal is usually 750, and if it is PC, it is something like 1920. ViewportWidth: 1920, viewportHeight: ViewportUnit: 1080, // The height of the viewport can also be set without unitPrecision: 3, // Specify the decimal number of the window unit value converted to 'px' (many times not divisible). It is recommended to use vw // to filter out class names that are not converted to Windows units. You can customize and add them indefinitely. It is recommended to define one or two common class names: selectorBlackList: ['. Ignore ', '. Hairlines '], minPixelValue: 1, // less than or equal to '1px' does not convert to window units, you can also set to the value you want mediaQuery: false // Allows conversion of 'px' in media queries,<! --postcss-viewport-units":{} Official advice -->"
      <! -- Filter out ::after ::before -->"postcss-viewport-units":{ filterRule: rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1 }, "cssnano": { preset: "Default ", // Autoprefixer" postcss-zIndex ": false}}}Copy the code

Using VH, you attach the Content attribute to each normal div tag, but if you attach the content attribute to the pseudo-class selector, it will be displayed, and setting the filter function will avoid ::after ::before and so on.

Using VW/VH layout to achieve self-adaptation is better than other schemes, which can perfectly solve the problem of adjusting screen self-adaptation.

with%Percentage difference

% is the ratio set to the size of the parent element, and vw is determined by the window size.

These window units are basically similar to %, but the advantage is that you can get the height directly, whereas % does not get the height of the viewable area correctly without setting the body height, so this is a nice advantage.

compatibility

Compatibility on mobile devices is fine.

Develop reading

– “Vue (Funicky zero) : Front-end user experience improvement (IV) Font adaptation”

– “Vue Advanced: Front-end User Experience improvement (5) Flexible Layout with Flex”