In-depth understanding of CSS font units px, em, rem and %-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

In-depth understanding of CSS font units px, em, rem and %

yulia

Sep 19, 2018 pm 02:23 PM

css

When we layout the page, we usually choose to use px as the length unit. Many people will be unfamiliar with em, rem and other length units. Next, let me talk to you about CSS font units px, em, rem, and percentage. Friends in need can refer to it, I hope it will be helpful to you.

There are many types of css font units. We only introduce %, px, em, and rem here.

1. Percent %
2.px pixel (pixel). Relative length unit. Pixels px are relative to the display screen resolution.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1{
               font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            字体为20px
       </div>
    </body>
</html>

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

The default font size of any browser is 16px. All unadjusted browser font sizes conform to: 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 12px=1.2em, 10px=1em, also That is to say, you only need to divide your original px value by 10, and then change to em as the unit.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                /*相对于浏览器的字体大小16px定义，此时浏览器的字体大小为10px，便于以后计算*/
                font-size: 62.5%;
            }
            .div1{
                font-size: 2em;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            字体2em相当于20px
        </div>
    </body>
</html>

Characteristics of em

1. The value of em is not fixed. The value of
2.em will inherit the font size of the parent.
3.rem is a new relative unit (root em) introduced by CSS3. Rem is still a relative size, but the value is relative to HTML. Through it, you can adjust the size of all fonts proportionally by modifying the root element, and you can avoid the chain reaction of compounding font sizes layer by layer

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             .div1{
                 /*相对于HTMl字体*/
                 font-size: 2rem;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            字体2rem相当于32px
        </div>
    </body>
</html>

Thank you!

The above is the detailed content of In-depth understanding of CSS font units px, em, rem and %. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn