This is the 24th day of my participation in the August More Text Challenge

Creation is not easy, click a “like” and then watch!

Follow the column to get you into the depths of the CSS world

preface

Today, we live in a world of mobile phones. There are so many phones, there are so many screens, and the screen sizes have gone from 2.4 inches back then to 3.5 inches, 4.0 inches, 5.0 inches and so on, to basically 6.0 inches now.

em

It is relative to the parent font size.

For example, if you set font size: 2em to an element, the default font size is actually inherited from the parent. Font size: 2em means that the current element is twice the size of the parent.

Find the px value of em below

body{
  font-size: 2em;
}
p {
  font-size: 2em;
  width: 2em;
}
<body>
em
<div>
  <p>em</p>
</div>
</body>
Copy the code

The first EM is 32px in size and the second em is 64px in size.

The default HTML is 16px, the body is 2em, which is twice the default 32px, div is 32px, and p is twice the default 64px.

ch

It’s the width relative to ‘0’ (zero). One ch is just a zero.

div {
  width: 3ch;
  background: powderblue;
}

<div>000000</div>
Copy the code

rem

Multiples of the font size of the element (HTML node).

For example, an element set width: 2rem means that the element is twice as wide as the FONT size of the HTML node.

If the HTML is not set to font size, the default is 16px.

Attention! : Chrome’s default minimum font size is 12px, and any font smaller than 12px will display 12px. But you can change it in Chrome Settings.

For example,

 html{
 font-size: 10px;
}
body {
  font-size: 18px;
}
h1 {
  font-size: 1rem;
}
      
Copy the code

The font size for h1 here is 10px;

Viewport unit

Viewport Units

What is viewport?

MDN

Viewports represent the currently visible area of computer graphics. In Web browser terms, this is usually the same as a browser window, but does not include the browser UI, menu bar, etc. — that part of the document you are browsing.

A Web browser contains two viewports, a Layout viewPort and a Visual ViewPort. Visual ViewPort refers to the visible part of the current browser and can change. When zooming with touch, when the dynamic keyboard pops up on the phone, or when the previously hidden address bar becomes visible, the Visual ViewPort shrinks, but the Layout ViewPort stays the same.

Depending on the

Viewport “viewport” in the unit, refers to the layout of the viewport, or Windows. The innerWidth/window. The innerHeight size.

vw

It corresponds to 1% of the viewport width.

Assuming the viewport width is 1290px, 10vw is 129px.

As you can see in the GIF below, the font size changes when you drag the width of the browser, but does not change when you drag the height.

vh

1vw is equal to 1% of the viewport width.

As you can see in the GIF below, the font size changes when you drag the height of the browser, but does not change when you drag the width.

vmin

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.

You can see it in the GIF below:

When the width of your browser is larger than the height, drag the width and keep the font size unchanged. Drag height, font changes.

When you browserhighlyLarger than the width, drag height, font size unchanged; Drag width, font change

vmax

Just the opposite of VMIN

%

It’s relative to the parent element.

% has different meanings for different attributes:

For example, font size: 200% is the same as font size: 2em, indicating that the font size is twice the default (inherited from the father) font size.

For example: line-height: 200% indicates that the line height is twice the size of the font.

For example: width: 100% : indicates that the width of its own content is twice the width of its parent content.