How to use window units for layout in CSS3

The Viewport unit has been around for several years, but we don't see it being used very often. They are now being supported by all major browsers and offer unique features that make them useful in certain situations, especially those involving responsive design. In this article, we mainly share with you the method of using window units for layout in CSS3, hoping to help you better learn the knowledge of CSS3.

<script>ec(2);</script>

Introduction to the Viewport Unit

The Viewport is the area where your browser actually displays content - in other words, your A web browser that does not include toolbars and buttons. These units are vw, vh, vmin and vmax. They all represent the ratio of the browser (Viewport) size and the scale change caused by window resizing.

For example, we have a 1000px (width) and 800px (height) viewport(Viewport)

vw - represents the width of the viewport (Viewport) is 1%, in our example 50vw = 500px.
vh——Percentage of window height 50vh = 400px.
vmin——The value of vmin is the smaller value of the current vw and vh. In our example, because it is landscape mode, 50vim = 400px.
vmax——Percentage of large size. 50vmax = 500px.

You can use them wherever pixel values ​​can be used, such as width, height, margin, font-size, etc. They will recalculate these values ​​by resizing the window or rotating the device's browser.

Take up the entire height of the page

Every front-end developer works on this. Your first instinct is to do this:

#elem{
height: 100%;
}

However, unless we add 100% height to the html and body, But that alone won't work, because such code is inelegant and will most likely break the rest of your design. Using vh it becomes quite easy, just set 100vh for the height and it will always be the height of your window.

#elem{
height : 100vh;
}

This seems to be a perfect full screen image for the hero and looks very stylish.

Child element size changes relative to the browser rather than the parent element

In some cases, what you want is for the child element size to change relative to the window rather than parent element. Similarly, according to the previous example, this will not work:

#parent{
width: 400px;
}
#child{
/* This is equal to 100% of the parent width, not the whole page. */
width: 100%;
}

If we use vw to set the child element, then it will simply overflow and take the entire page. Width:

#parent{
width: 400px;
}
#child{
/* This is equal to 100% of page, regardless of the parent size. */
width: 100vw;
}


Responsive font size

Viewport units can also be used in text! In this example we use vm to set the font size to create a great line of CSS responsive text. Goodbye Fittext!

Responsive Vertical Centering

By setting the element's width, height, and margin in Viewport units, you can set centering without using any other tricks.

Here is a rectangle with a height of 60vh and a top and bottom margin of 20vh. Their sum is 100vh (60 2*20), so that it can always be centered even if the window is resized.

#rectangle{
width: 60vw;
height: 60vh;
margin: 20vh auto;
}


Equal-width columns

You can use viewport units to set up a responsive grid. They behave like percentages but are always relative to the size of the viewport. So you could put them inside a parent element that is wider than the window, but it would still have the grid to keep it as wide as it should be. This makes it easy to create a full-screen slider.

This technique requires elements to use float:left to align adjacent elements:

.column-2{
float: left;
width: 50vw;
}
.column-4{
​​float: left;
width: 25vw;
}
.column-8{
float: left;
width: 12.5vw ;
}


Related recommendations:

Typesetting based on window units_html/css_WEB-ITnose

Teach you CSS Grid layout in five minutes

What are the skills of CSS layout

The above is the detailed content of How to use window units for layout in CSS3. For more information, please follow other related articles on the PHP Chinese website!