All geek questions in one place

In CSS, what is the difference between VW and EM?

I am wondering what is the main difference between VW and EM, as they both scale to window size, and they both use in a flexible design.

+4
source share
4 answers

I am wondering what is the main difference between VW and EM, as both of them scale to the window size, and both of them use in a responsive design.

VW - as some say - is the percentage width of the viewport.

Given that small smart devices tend to have high narrow viewports and more, devices such as a laptop have much more viewports in the form of letters, this value can give interesting, imperfect results.

EM, direct parent.

, , . :

em . , 14px, 1em = 14px; 2em = 28px ..

, , 1em, , . , 14px, 2em, 1em, , , 28px,

. EM - . :

html {
    font-size:14px;
} 

h1 {
    font-size:1.5em;
}
p {
    font-size:0.9em;
}
main {
    font-size:1.15em;
}
.container {
    font-size:1.1em;
}

, HTML:

<html>
<body>
    <main>
        <div class="container">
        <h1>Header</h1>
        <p>Some paragraph text</p>
        </div>
    </main>
</body>
</html>

, ? 0.9 x 14px? ,

14 x 1.15 x 1.1 x 0.9 = 15.94px

EM . , , , CSS, . Root em, rem, em , html.

, CSS :

p {
    font-size:0.9rem;
}

14 x 0.9, (HTML, ). , em.

+8

VW - ( ), em - "m" .

, 5vh 5% , 5em - 5 .

:

CSS 3

Mozilla Developer Network CSS

+1

- . VW, VH, VMIN VMAX ('window').

, EM . , h1 css:

body {
  font-size: 16px;
}

h1 {
  font-size: 2em;
}

16px EXCEPT h1, 32px.

body {
  font-size: 16px;
}

h1 {
  font-size: 2vw;
}

h1 ( 2% ).

0

em . , 14px, 1em = 14px; 2em = 28px ..

vw , . , 14vw = 14 * 1/100 = 1,4% .

0

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

More articles:


All Articles