Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to use vh and wh units in css3. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

In css3, vh and wh are viewport units and relative length units. Wh is relative to the width of the viewport, "1vw" is equal to "1%" of the viewport width, while vh is relative to the height of the viewport, and "1vh" is equal to "1%" of the height of the viewport.

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

In css3, vh and wh are viewport units and relative length units.

Viewport Units (Viewport units)

First, we need to understand what a viewport is. In the industry, a highly respected theory is the explanation of viewports put forward by Peter-Paul Koch ("PPK god")-on the desktop side, viewports refer to the visual area of the browser; while on the mobile side, it involves three viewports: Layout Viewport (layout viewports), Visual Viewport (visual viewports) and Ideal Viewport. The "viewport" in the viewport unit, on the desktop side, undoubtedly refers to the visual area of the browser, but on the mobile side, it refers to the Layout Viewport of the three Viewport.

Viewports in Viewport Units according to the CSS3 specification, viewports mainly include the following 4 units:

Vw: 1vw is equal to 1% of the viewport width relative to the width of the viewport

Vh: 1vh equals 1% of the height of the viewport relative to the height of the viewport

Vmin: choose the smallest of vw and vh

Vmax: choose the largest of vw and vh

Viewport units are different from% units, which depend on the size of the viewport and are defined as a percentage of the viewport size, while the% units depend on the ancestor element of the element.

Measured in viewport units, the viewport width is 100vw and the height is 100vh (vertical screen on the left and landscape screen on the right) for example, if the viewport size of the browser on the desktop side is 650px, then 1vw = 650 * 1% = 6.5px (this is a theoretical calculation, if the browser does not support 0.5px, then the actual rendering result may be 7px).

Adapt the page using viewport units

For mobile development, the most important point is how to adapt the page to achieve multi-terminal compatibility. Different adaptation methods have their own advantages and disadvantages. As far as the mainstream responsive layout and flexible layout are concerned, the layout implemented through Media Queries requires the configuration of multiple response breakpoints, and the experience is also very unfriendly to users: the layout remains the same at the resolution within the range of response breakpoints, while in the moment of switching in response to breakpoints, the layout brings about fault-like switching changes, clicking again and again like a cassette record player. Through the flexible layout of dynamic calculation using rem units, it is necessary to embed a script in the header to change the listening resolution to dynamically change the font size of the root element, so that CSS and JS are coupled together. Is there any way to solve such a problem? The answer is yes. Adapting pages using viewport units can solve both the problem of responsive faults and the problem of script dependency.

Practice 1: use only vw as the CSS unit

Under the practice of using only vw units as the only CSS unit for application, we comply with: 1. For the size of the design draft converted to vw units, we use the Sass function to compile

/ / iPhone 6 size as the design benchmark $vm_base: 375; @ function vw ($px) {@ return ($px / 375) * 100vw;}

two。 Vw is used as the CSS unit for text, layout height, width, spacing, etc.

.mod _ nav {background-color: # fff; & _ list {display: flex; padding: vm (15) vm (10) vm (10); / / Inner spacing & _ item {flex: 1; text-align: center; font-size: vm (10); / / font size & _ logo {display: block Margin: 0 auto; width: vm (40); / / width height: vm (40); / / height img {display: block; margin: 0 auto; max-width: 100% }} & _ name {margin-top: vm (2);}

3.1Physics pixel lines (that is, 1px under normal screen and 0.5px under HD screen) are implemented using transform attribute scale.

.mod _ grid {position: relative; &:: after {/ / implements the lower border of 1 physical pixel content:''; position: absolute; z-index: 1; pointer-events: none; background-color: # ddd; height: 1px; left: 0; right: 0; top: 0 @ media only screen and (- webkit-min-device-pixel-ratio: 2) {- webkit-transform: scaleY (0.5);-webkit-transform-origin: 50%;}}.}

4. For graphs that need to maintain the aspect ratio, padding-top should be used instead.

.mod _ banner {position: relative; padding-top: percentage (100 absolute; left 700); / / use padding-top height: 0; overflow: hidden; img {width: 100%; height: auto; position: absolute; left: 0; top: 0;}}

As a result, we can achieve the page effect of a common layout as follows:

Practice 2: match vw and rem to optimize the layout

Although such a page looks like a good fit, you will find that because it is a layout implemented in viewport units, it automatically zooms depending on the size of the viewport, whether the viewport is too large or too small, it also loses the limit of the maximum and minimum width as the viewport is too large or too small. Of course, you can ignore such a small, unfriendly user experience, but let's try to fix such a small flaw. So, think of why not combine rem units to achieve the layout? The core of rem elastic layout is to dynamically change the size of the root element, so we can do this by:

Set the size of the root element to vw units that vary with viewports, so that you can change its size dynamically.

Limit the maximum and minimum font size of the root element, with body plus maximum and minimum width

In this way, we can achieve the maximum and minimum restrictions on the width of the layout. Therefore, based on the above conditions, we can conclude that the code implementation is as follows:

/ / rem unit conversion: 75px is only convenient for calculation, 750px-75px, 640-64px, 1080px-108px, and so on $vm_fontsize: 75; / / iPhone 6 size root element size base value @ function rem ($px) {@ return ($px / $vm_fontsize) * 1remt;} / / Root element size using vw unit $vm_design: 750 TX html {font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw / / at the same time, limit the maximum and minimum value of the root element @ media screen and (max-width: 320px) {font-size: 64px;} @ media screen and (min-width: 540px) {font-size: 108px;}} / / body also increases the maximum and minimum width limit to prevent the default 100% width block element from following body and being too large and too small body {max-width: 540px Min-width: 320px;} these are all the contents of this article entitled "how to use vh and wh units in css3". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.