All geek questions in one place

Html with font size 62.5% and em calculations

I am a little confused and hope someone can explain this behavior !?

I have the following code:

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html{
                font-size: 62.5%; // set the base font-size to 10px
            }

            body{
                background-color: red;
            }

            @media only screen and ( max-width: 100em ) /* 1000px?? */ {

                body{
                    background-color: green;
                }

            }

        </style>
    </head>
    <body>

    </body>
</html>

I think the background color of the body should switch from red to green if the viewport is less than 1001 pixels. But that does not work. Color changes to 1600 pixels. So it looks like font size: 62.5% doesn’t work !? Question: why?

+4
source share
3 answers

From CSS Material Query Specification

- , , . , HTML "em" "font-size".

+2

:

body { font-size: 62.5%; }

, , html.

0

beautifulcoder.

, , . html. , . W3C .

body {font-size:10px;}
0
source

Source: https://habr.com/ru/post/1544224/

More articles:


All Articles