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

This article mainly introduces "how to use CSS font unit px,em,rem and%". In daily operation, I believe many people have doubts about how to use CSS font unit px,em,rem and%. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use CSS font unit px,em,rem and%". Next, please follow the editor to study!

1. %%

2.px pixels (pixel). A unit of relative length. Pixel px relative to the resolution of the display screen.

.div1 {

Font-size:20px

}

The font is 20px

2. Em is a unit of relative length. Relative to the font size within the object text. If the font size of the current inline text is not artificially set, it is equivalent to the browser default font size.

The default font size for any browser is 16px. The font size of all unadjusted browsers matches: 1em=16px. 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 em value become 16px*62.5%=10px, so 12pxvalues 1.2emphilic 10pxtransi1em, that is, you only need to divide your original px value by 10 and replace it with em as a unit.

Body {

/ * relative to the 16px definition of the font size of the browser, the font size of the browser is 10px, which is convenient for later calculation * /

Font-size:62.5%

}

.div1 {

Font-size:2em

}

Font 2em is equivalent to 20px

Characteristics of em

The value of 1.em is not fixed.

The value of 2.em inherits the font size of the parent.

3.rem is a new relative unit (rootem) introduced by css3. Rem is still a relative size, but the value is relative to HTML. Through it, we can not only adjust all font sizes proportionally by modifying the root element, but also avoid the chain reaction of font sizes compounding layer by layer.

.div1 {

/ * relative to HTMl font * /

Font-size:2rem

}

Font 2rem is equivalent to 32px

At this point, the study of "CSS font unit px,em,rem and% how to use" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.