Summary of CSS units (such as rem, px, em, vw, vh, vm)

This article brings you a summary of CSS units (such as rem, px, em, vw, vh, vm) and introduces the differences between these units. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

px: pixel (pixel) relative length unit, relative to the screen display resolution;

em: em The value is not fixed and will be integrated with the font size of the parent element;

Note:

1. Select body and declare Font-size=62.5%;

2. Divide the original px value by 10, and then replace it with em as the unit;

　3. Recalculate the em value of the enlarged fonts. Avoid repeated declarations of font sizes.

The default font size of any browser is 16px. All unadjusted browsers comply with 1em=16px, 0.75em=12px, and 10px=0.625em. In order to simplify the conversion of Font-size, you need to declare Font-size=62.5% in the body selector in CSS, which makes the value of em become 16px*62.5%=10px, so 12px is 1.2em and 10px is 1em. That is, just divide the original px value by 10 and replace it with the unit of em.

rem: Relative unit, (root em is rem). When using rem as the unit to set the font size, it is relative to the size of the HTML root element, which can be proportional to the root element. Modify and adjust all font sizes. Generally, they are written on the body or html. For example:

body{font-size:625%;}

, which is 1rem=100px;

, but it is best to match it when writing projects. Media queries together, for example:

　　html{font-size:10px}　　　　　　//10px==62.5%

　　@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

　　@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

　　@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

　　@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

　　@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

　　@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

　　@media screen and (min-width:800px){html{font-size:25px}}

vw: The maximum width of the viewport, 1vw=one percent of the viewport width;

vh: The maximum height of the viewport, 1vh = one percent of the viewport height;

vmin/vm: The smaller of the width or height relative to the viewport. The smallest one is divided into 100 units of vmin (i.e. vm).

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit CSS Video Tutorial!

Related recommendations:

php public welfare training video tutorial

CSS Online Manual

##div/css graphic tutorial

The above is the detailed content of Summary of CSS units (such as rem, px, em, vw, vh, vm). For more information, please follow other related articles on the PHP Chinese website!