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

What are the common uses of Viewport in CSS3? many novices are not very clear about this. In order to help you solve this problem, the following editor will explain it in detail. People with this need can come and learn. I hope you can get something.

Introduction window (Viewport) unit

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

For example, we have a 1000px (wide) and 800px (high) window (Viewport)

Vw-- represents a width of 1% of the Viewport, in our case 50vw = 500px.

Percentage of vh-- window height 50vh = 400px.

The value of vmin--vmin is the smaller value in the current vw and vh. In our example, because it is horizontal mode, 50vim = 400px.

Percentage of large size of vmax--. 50vmax = 500px.

You can use them anywhere you can use pixel values, such as width,height,margin,font-size, etc. They will recalculate these values by resizing the window or rotating the browser of the device.

Occupy the entire height of the page

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

CSS Code copies content to the clipboard

# elem {

Height: 100%

}

However, unless we add 100% height to html and body, it won't work just like this, because the code is not elegant and is likely to destroy the rest of your design. It's pretty easy to use vh, just set 100vh for the height, and it will always be the height of your window.

CSS Code copies content to the clipboard

# elem {

Height: 100vh

}

Viewport width Siz

Vw is a new unit added by CSS3 to calculate font size using viewport width. This allows more responsive font sizes.

Although this seems to be a very useful unit for responsive design, I am not a fan of it personally. Because it doesn't give me more control over font size, it always shows too big or too small.

My method.

Before I did this research, I had been using pixels to set my font size. This is because most browsers today allow users to zoom in on the page when the font is too small, so there is no problem with using pixels.

However, I find that this approach greatly limits the ability to scale. Although my font looks good on small and medium-sized screens, it should be better optimized on the big screen. Even if users have the option to zoom in, this should not be what we want them to do.

So my solution for using rem settings is (using pixels as a backup).

CSS Code copies content to the clipboard

Html {

Font-size: 62.5%; / * sets the base font to 10px for easier math * /

}

Body {

Font-size: 16px

Font-size: 1.6rem

/ * sets the default sizing to make sure nothing is actually 10px * /

}

H2 {

Font-size: 32px

Font-size: 3.2rem

}

So I expanded the font size and I just had to write like this--

CSS Code copies content to the clipboard

@ media screen and (min-width: 1280px) {

Html {

Font-size: 100%

}

}

This method uses pixels as the unit of degradation because rem is not supported for IE8 and below. One problem is that when I change the base font size, it can only be applied to the extensible size, not to the backup font size. But I don't think this is a huge problem, because it's just an additional problem for the core of larger devices.

If you have any ideas on how to improve this problem, please let me know in the comments. I can also write a SCSS mix so that I don't have to enter these two backup and rem units.

The size of the child element changes according to the browser rather than the parent element

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

CSS Code copies content to the clipboard

# 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 child elements, it will simply overflow and take the full width of the page:

# parent {

Width: 400px

}

# child {

/ * This is equal to 100% of page, regardless of the parent size. , /

Width: 100vw

}

Response is vertically centered

By setting the width,height of the element and the Viewport unit of the margin, you can set the center without using any other technique.

There is a rectangle with a height of 60vh with a margin of 20vh, and they add up to 100vh (60 / 2 / 20), so that it can always be centered even if the window is resized.

CSS Code copies content to the clipboard

# rectangle {

Width: 60vw

Height: 60vh

Margin: 20vh auto

}

Equal width column

You can use Viewport units to set up a responsive grid. They behave like percentages but always relative to the size of the Viewport. So you can put them in a parent element that is wider than the window, but it still has a grid to maintain its proper width. This is a handy way to create a full-screen slider.

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

CSS Code copies content to the clipboard

.column-2 {

Float: left

Width: 50vw

}

.column-4 {

Float: left

Width: 25vw

}

.column-8 {

Float: left

Width: 12.5vw

}

Summary

The Viewport unit has its purpose and is worth trying. They are easy to understand and, in some cases, are very helpful for more difficult solutions or impossible technologies to replace CSS.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.