Розміри

• • px - піксель на екрані

• % - від батьківського елементу

  • em - поточний розмір тексту (2em, 0.5em)

  • rem - те саме що em, але без впливу на елементи всередині

  • vh, vm - розміри відносно вікна браузера (не залежать від батьківського контейнера)

  • vmin, vmax - втиснути повне зображення, або вилізти по ширині

Фото по центру

.fullscreen-bg {   background: url(image.jpg);   background-position: center;   background-size: cover;   width: 100%;   height: 100vh;}

<div style="font-size:12px"> 

     Текст 12

     <div style="font-size:8px">

          Текст 8

          <div style="font-size:18px">

               Техт 18

          </div>

     </div> 

</div>

<div style="font-size:150%">

     Побільше текст

     <div style="font-size:150%">

          Ще побільше текст

          <div style="font-size:150%">

               Ще побільше текст

          </div>

     </div>

</div>

<style> 

     li { font-size: 0.8em; } 

</style> 

<ul style="font-size:30px"> 

  <li>

   1

   <ul> 

     <li>

     2

     <ul> 

       <li>

         3

         <ul> 

           <li>

             4 

            <ul> 

              <li>

              5 

              <ul>

                <li>

                6

                </li> 

              </ul> 

              </li> 

            </ul>

            </li>

          </ul>

          </li>

     </ul>

     </li>

  </ul> 

  </li> 

</ul>

<style> 

     li { font-size: 0.8rem; } 

</style> 

<ul style="font-size:30px"> 

  <li>

   1

   <ul> 

     <li>

     2

     <ul> 

       <li>

         3

         <ul> 

           <li>

             4 

            <ul> 

              <li>

              5 

              <ul>

                <li>

                6

                </li> 

              </ul> 

              </li> 

            </ul>

            </li>

          </ul>

          </li>

     </ul>

     </li>

  </ul> 

  </li> 

</ul>