Home > Developer > JavaScript
[Frontend NLP white learning path] css3 Adaptive Layout Unit (vw). How much do you know about this ?, Css3vw
Viewport units)
What is a viewport?
On the desktop side, the view refers to the desktop side and the visible area of the browser. On the mobile side, the view involves three views: Layout Viewport (Layout View ), visual Viewport and Ideal Viewport ).
In the unit of the view, the desktop refers to the visible area of the browser, and the mobile terminal refers to the Layout Viewport In the Viewport.
According to the CSS3 specification, the following four view units are available:
1. vw: 1 vw equals 1% of the width of the view.
2. Fill in the following link: 1 Gbit/s equals to 1% of the height of the view.
3. vmin: select the smallest one in vw and FLAC.
4. vmax: select the largest one in vw and FLAC.
VL and vw: the height and width relative to the viewport, rather than the parent element (the CSS percentage is the height and width relative to the nearest parent element containing it ). The value 1 Gbit/s for 1 Gbit/s is 1/100 in height, and the value 1 Gbit/s is 1/100 in width.
For example, if the browser height is 950px, the width is 1920px, and the value of 1vw is 950px/100 = 9.5 px, the value of 1vw is 1920px/100 = 19.2 px.
The value of vmax relative to the width or height of the view. The largest one is divided into 100 vmax.
The smaller the width or height of the vmin relative to the viewport. The smallest one is divided into 100 vmin units.
Differences between * H/v w and * %
See the following simple examples:
<!DOCTYPE html>Compatibility issues (support for iOS 8 and later versions and Android 4.4 and later versions on the Mobile End, and comprehensive support for the x5 kernel)
Reference: http://mp.weixin.qq.com/s/G7ZYCiO__4g2LjRuNl32Ew
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
