— Use calc() to calculate the width and height (vw/vh)

What is calc of alpha?

Simply put, it stands for calculate, a new function in CSS3. For dynamic calculation of width/height, you can use calc() to set the attributes of the element (margin, border, padding, font-size, etc.).

Calc () syntax

The syntax of CALC is simply four operations,

  1. Use “+”, “-“, “*” and “/” four operations;
  2. You can use percentages, PX, EM, rem, etc.
  3. A mixture of units can be used for calculation;
  4. “Width: calc(12%+5em)”; “width: calc(12%+5em)
  5. When an expression contains asterisks (*) and slashes (/), it is recommended to leave Spaces before and after the expression.

Calc () USES

It is used to calculate uncertain values, such as an element with a margin of 10px and a width of 100%. If you set it up

width: 100%;
margin: 10px;
Copy the code

You can see that the box has overflowed, so what can be done about it? I can use the calc function.

width: 800px;
width: calc(100% - (10 *2)px);
margin: 10px;
Copy the code

What are v sub w and vh?

Vw, VH, vmin, and vmax are Windows units and relative units. It is not relative to the parent node or the root node of the page. It’s determined by the Viewport size, in units of 1, which stands for something like 1%. A Viewport is the area where your browser actually displays content — in other words, your Web browser that doesn’t include toolbars and buttons.

The specific description is as follows:

  1. Vw: Percentage of window width (1vw means 1% window width)
  2. Vh: Percentage of window height
  3. Vmin: Take the smaller of the current Vw and Vh
  4. Vmax: Take the larger value of Vw and Vh

Vw, VH and % difference

(1) % is the ratio to the size of the parent element, vw and vh are determined by the window size. (2) Vw and VH have the advantage of being able to directly obtain the height, while % cannot correctly obtain the height of the visible area without setting the body height, so this is a good advantage.

Calc is used in combination with VH/VW

We used % with calc above to achieve the desired effect, why vw and VH? In the difference between % and VW,vh, % cannot get the height of the viewable area correctly without setting the body height.

Calc plus vw calculates the width
width: 800px; /* fallback for b*/
width: -moz-calc(100vw - (2 * 10)px);
width: -webkit-calc(100vw -(2 * 10)px);
width: calc(100vw - (2 * 10)px);
Copy the code
Calc + vh calculates the height
height: 800px;
height: -moz-calc(100vh - (2 * 10)px);
height: -webkit-calc(100vh - (2 * 10)px);
height: calc(100vh - (2 * 10)px);
Copy the code