Home > Web Front-end > Front-end Q&A > Are there any compatibility issues with vw in css?

Are there any compatibility issues with vw in css?

WBOY
Release: 2022-04-27 18:05:59
Original
3517 people have browsed it

There is a compatibility issue with vw in css. Compatibility of vw: 1. On desktop PCs, vw is compatible with Chrome 26, Firefox 19, Safari 6.1, IE10 and Opera 15 or above; 2. On mobile devices, vw is compatible with Android 4.4 and iOS 8 or above.

Are there any compatibility issues with vw in css?

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

Is there any compatibility issue with vw in css

Desktop PC

Chrome: Perfectly supported since version 26 (February 2013)

Firefox: Perfectly supported since version 19 (January 2013)

Safari: Perfectly supported since version 6.1 (October 2013)

Opera: Since 15 Perfectly supported since version 1 (July 2013)

IE: Since IE10 (including Edge), it is still only partially supported (vmax is not supported, and vm replaces vmin)

mobiledevices

Android: Perfectly supported since version 4.4 (December 2013)

iOS: Perfectly supported since iOS8 version (September 2014).

Extended knowledge:

(1) vw, vh, vmin, and vmax are window units and relative units. It is not relative to the parent node or the root node of the page. It is determined by the size of the viewport. The unit is 1, which means something like 1%.

The viewport is the area where your browser actually displays content—in other words, your web browser without toolbars and buttons.

(2) The specific description is as follows:

  • vw: the percentage of the window width (1vw represents the width of the window as 1%)

  • vh: The percentage of the window height

  • vmin: The smaller of the current vw and vh

  • vmax: The current vw and vh The larger value in vh

The difference between vw, vh and % percentage

(1) % is the size relative to the parent element The set ratios, vw and vh, are determined by the window size.

(2) The advantage of vw and vh is that they can directly obtain the height. However, using % cannot correctly obtain the height of the visible area without setting the body height, so this is a good advantage.

(Learning video sharing: css video tutorial)

The above is the detailed content of Are there any compatibility issues with vw in css?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template