Author: Ahmad Shaded by SitePoint

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

**CSS Viewport Units ** have been around for the past few years, and over time, more and more developers are using them. They have the advantage of giving us a way to resize dynamically without using J avaScript. And if it fails, there are plenty of backup options.

In this article, we’ll learn about CSS Viewport Units and how to use them, listing some common problems with their solutions and use cases. Let’s get started.

Introduction to the

According to the CSS specification, the viewport percentage unit relative to the size of the initial contained block is the root element of a Web page.

Viewport units: VW, VH, vmin and vmax.

The vw unit is the percentage of the width of the root element. 1vw is equal to 1% of the viewport width.

Viewport width

Vw units represent the percentage of the width of the root element; 1vw is equal to 1% of the viewport width.

Suppose we have an element with the following CSS:

.element {
    width: 50vw;
}
Copy the code

When the viewport width is 500px, 50VW is calculated as follows

width = 500*50% = 250px
Copy the code

Viewport height

Vh units represent the percentage of the height of the root element, one Vh equal to 1% of the height of the viewport.

We have an element with the following CSS:

.element {
    height: 50vh;
}
Copy the code

When the viewport height is 290px, 70Vh is calculated as follows:

height = 290*70% = 202px
Copy the code

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Vmin unit

Vmin represents the smaller values in the width and height of the viewport, namely vw and VH. If the viewport width is greater than its height, the value is calculated based on the height.

Let’s take the following example.

We have a landscape phone with an element that has a Vmin unit. In this case, the value will be calculated based on the viewport height because it is less than the width.

.element {
    padding-top: 10vmin;
    padding-bottom: 10vmin;
}
Copy the code

Here is how vmin is calculated:

As you might guess, the result is shown below

Padding-top = (10% of height) = 10% * 164 = 16.4 PX PADDing-bottom = (10% of height) = 10% * 164 = 16.4pxCopy the code

Vmax unit

Vmax is the opposite of vmin and is the larger value in VW and VH.

Let’s take the following example.

.element {
    padding-top: 10vmax;
    padding-bottom: 10vmax;
}
Copy the code

The calculation results are as follows:

padding-top = (10% of width) = 10% * 350 = 35px 
padding-bottom = (10% of width) = 10% * 350 = 35px
Copy the code

What is the difference between viewport units and percentages?

Viewport units are based on the root element of the page, while percentages are based on the container in which they are located. They are therefore different from each other, but each has its own uses.

Use cases for viewport units

The font size

CSS viewport units are ideal for responsive typesetting. For example, we could use the following as an article title:

.title {
    font-size: 5vw;
}
Copy the code

The font size of the title will increase or decrease depending on the viewport width. Just as the font size provided is 5% of the viewport width. However, using it without proper testing can lead to potholes. Take a look at the video below:

The body size becomes very small, which is not good for accessibility and user experience. As far as I know, the minimum font size on mobile devices should not be less than 14px. In GIF, no less than 10px.

To solve this problem, we need to provide a minimum font size for the title, using calc()

.title {
    font-size: calc(14px + 2vw);
}
Copy the code

The calc()CSS function will have a minimum value of 14px and add a value of 2vw on top of that, so the font size value will not be too small.

Another important consideration is font size on large screens, such as the 27 “iMac. What’s going to happen? You guessed it, the font size is around 95px, which is a lot. To prevent this, we should use media queries and change font sizes on some breakpoints.

@media (min-width: 1800px) { .title { font-size: 40px; }}Copy the code

By resetting the font size, we can ensure that the size is not too large. You may also need to add multiple media queries, but that depends on you and the context of your project.

IO /shadeed/pen…

Full screen

Sometimes we need a section to get 100% of the viewport height. For this, we can use the ViewPort height unit.

.section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
Copy the code

By adding height: 100vh, we can ensure that the section height will take 100% of the viewport. In addition, we added some Flexbox to handle horizontal and vertical centralization.

Codepen. IO /shadeed/pen…

Sticky layout (Footer)

On the big screen, the site content is sometimes minimal and the footer isn’t stuck at the bottom. This is normal and not considered a bad practice. However, there is room for improvement. Consider the following diagram representing the problem:

To solve this problem, we need to give the content a height equal to the viewport height – (header + footer). Doing this dynamically is difficult, but with CSS viewports, it’s easy.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

The first solution:calcAnd viewport units

If the header and footer heights are fixed, you can combine the calc() function with the viewport unit as follows:

header,
footer {
    height: 70px;
}

main {
    height: calc(100vh - 70px - 70px);
}
Copy the code

There is no guarantee that this solution will always work, especially for footer. In my career, I didn’t use a fixed height footer because, for example, the footer wouldn’t work with different screen sizes.

2. Second solution: Flexbox and Viewport units (recommended)

By setting 100vh to the height of the body element, you can then use Flexbox to make the main element take up the remaining space.

body {
    min-height: 100vh;
    display: flex
    flex-direction: column;
{

main {
    /* This will make the main element take the remaining space dynamically */
    flex-grow: 1;
}
Copy the code

That solves the problem, and we have a sticky footer regardless of the length of the content.

Codepen. IO /shadeed/pen…

Responsive element

Let’s say we have a portfolio to showcase our responsive design work, and we have three devices (mobile, tablet, and laptop). Each device contains an image. The target uses CSS to respond to these pages.

By using CSS grids and viewport units, we can make it completely dynamic and responsive.

<div class="wrapper">
  <div class="device laptop"></div>
  <div class="device mobile"></div>
  <div class="device tablet"></div>
</div>
Copy the code

Viewport units can also be used for grid- * attributes, as well as for border, border-radius, and other attributes.

.wrapper {
  display: grid;
  grid-template-columns: repeat(20, 5vw); 
  grid-auto-rows: 6vw;
}

.mobile { 
  position: relative;
  z-index: 1;
  grid-column: 2 / span 3;
  grid-row: 3 / span 5;
}
 
.tablet {
  position: relative;
  z-index: 1;
  grid-column: 13 / span 7; 
  grid-row: 4 / span 4;
  border-bottom: 1vw solid #a9B9dd;
  border-right: solid 3vw #a9B9dd;
}
 
.laptop {
  position: relative;
  grid-column: 3/span 13;
  grid-row: 2 / span 8;
}

/* Viewport units are used for the bottom, left, right, height, and border-radius. Isn't that cool? */ .laptop:after { content:""; position:absolute; bottom: -3vw; Left: 5.5 vw; Right: 5.5 vw; height: 3vw; background-color: #a9B9dd; border-radius: 0 0 1vw 1vw; }Copy the code

Example: codepen. IO/shadeed/pen…

Break free from the container

I’ve noticed a use case that works best for editing the layout. A child element, even if the parent element’s width is limited, occupies 100% of the viewport width. Consider the following:

.break-out {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
Copy the code

Let’s break it down so that we can understand, bit by bit, how all these properties work.

Add 1.width: 100vw

The most important step is to set the width of the image to 100% of the viewport.

2. Addmargin-left: -50vw

To center the image, we need to give it a negative margin half the width of the viewport.

3. Addleft: 50%

Finally, we need to push the image to the right with a value of 50% of the parent width.

IO /shadeed/pen…

Vertical and horizontal spacing

Another interesting use case that COMES to mind is the use of viewport units to represent the spacing between elements. This can be used with margin, top, bottom, and grid-gap equivalents. When used, the spacing will be based on viewport width or height, which can be useful for making the layout more dynamic.

Modal dialog

For modes, we need to push them in from the top of the viewport. Typically, you do this using the top attribute and using a percentage or pixel value. However, for viewport units, we can add a spacing that can be changed depending on the height of the viewport.

.modal-body {
    top: 20vh;
}
Copy the code

IO /shadeed/pen…

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Page header

The page header is the part that acts as the page introduction. It usually has a title and description, and the height of the upper and lower edges is fixed or filled in

For example, there are the following CSS styles:

.page-header { padding-top: 10vh; padding-bottom: 10vh; }. Page-header h2 {margin-bottom: 1.5vh; }Copy the code

Use vH units for paddding of the page title, and margins below the title. Notice how the spacing changes!

Codepen. IO /shadeed/pen…

Vmin and Vmax use cases

This use case is about the top and bottom padding of the page title element. When the viewport is small (moving), the padding is usually reduced. By using VMIN, we can get proper top and bottom padding based on the smaller size (width or height) of the viewport.

.page-header {
    padding: 10vmin 1rem;
}
Copy the code

Codepen. IO /shadeed/pen…

Aspect ratio

We can use VW units to create response elements that maintain aspect ratios regardless of viewport size.

First, you need to determine the aspect ratio you want, which is 9/16 for this example.

Section {/* 9/16 * 100 */ height: 56.25vw; }Copy the code

Codepen. IO /shadeed/pen…

Popular top bezel

Do you know the top border that most websites use? Usually, it’s the same color as the brand, which gives some personality.

We support an initial border value of 3px. How do I convert fixed values into viewport objects? So here’s how to calculate its equivalent vw.

vw = (Pixel Value / Viewport width) * 100
Copy the code

Viewport widths are used to estimate the ratio of pixel values to vw units needed.

For our example, we add the following style to the header:

.header {
    border-top: 4px solid #8f7ebc;  
}
Copy the code

In my case, the viewport width is 1440 (this is not a fixed number, please use your own number instead)

Vw = (4/1440) * 100 = 0.277Copy the code
.header {border-top: 0.277vw solid#8f7ebc;  
}
Copy the code

Even better, we can use a base pixel value, and the viewport unit can be an add-on.

.header {border-top: calc(2px + 0.138vw) solid$color-main;
}
Copy the code

Mobile scrolling problem

A common problem with mobile devices is scrolling even when using 100Vh due to the highly visible address bar. Louis Hoebregts wrote an article about this problem and gave a simple solution.

.my-element { height: 100vh; /* Height: calc(var(--vh, 1vh) * 100); /* height: calc(var(--vh, 1vh) * 100); }Copy the code
// First, we get the viewport height. We multiply it by 1% to get a value in vh unitsletVh = window.innerHeight * 0.01; / / then will ` -- the vh ` custom attribute values in the attribute set to document the root directory of a document. The documentElement. Style. SetProperty ('--vh', `${vh}px`);
Copy the code

Codepen. IO /shadeed/pen…

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: ishadeed.com/viewport-un…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.