How to easily change font size from px to em for a large, existing site?

How to easily change the font size from pxto emfor a large existing site?

Any tips to do this fast?

+2
source share
2 answers

It depends on your existing stylesheet, but it probably won't be soon. I'm afraid (if you want the site to look the same after you have done).

Potential problems

When you resize text in pixels, the visual size of the text will be the same as in CSS. For example, CSS p {font-size: 12px;}will cause all tags to <p>have a font size of 12 pixels.

, ems, .

, CSS:

body {font-size: .625em;}

p {font-size: 1.2em;}

.header {font-size: 1.5em;}

HTML:

<body>

<p>Paragraph</p>

<div class="header>
    <p>Paragraph inside header</p>
</div>

</body>

1,2 ( ) × 0,625 ( bodys) × 16 ( ) = 12 .

1,2 ( ) × 1,5 ( .header s) ×.625 × 16 = 18 .

HTML , , . , HTML - , .

, ems, , . <body> , .

body {
    font-size: .75em;/* 12px */
}

, , ,

h2 {
    font-size: 1.5em; /* 16px */
}

, . , , <li> .

, , .

body 0.625em, 10px (16 × 0,625 = 10), , , 1em= 10px, 1.1em= 11px .. , , , Ive .

, font-size, . , , , HTML.

+8
  • css
  • px, , .
  • , , . 10px =.5em, 12px = 1em
  • /
+1

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


All Articles