Единица измерения vh vw в CSS

Последнее обновление на 16.12.2022

vh (viewport height), vw (viewport width) — это новые единицы измерения, разработаны для адаптивной верстки и размеры зависят от окон браузера (размеров устройств). vh (1% высоты окна, то есть если задать font-size:1vh, то на экране монитора с высотой экрана 1000px размер шрифта будет равен 10px) зависит от высоты окна браузера, а vw (1% ширины окна), соответственно, от ширины окна браузера. Также есть связанная с ними величина, которая ограничивает их vmin — по наименьшему из величин vh, vw, а vmах — по наибольшему значению из значений величин vh, vw.

rem (корневой шрифт, первый символ r, означает root и переводится как корень) — сначала размер шрифта настраивается в px в теги <html> (там же меняются) и затем относительно тега <html> применяются в единицах измерения rem на весь html документ — глобально.

Пример использования rem css html код

 
html {
        font-size: 18px;
    }
    div.font1 >span {
      font-size: 0.7rem;
    }
    div.font2 >span {
      font-size: 0.9rem;
    }

 

<div class="font1">        
    <span>Пример<br>
        <span>отображения <br>
            <span>текста<br>
                <span>с использованием 0.7 rem</span>
            </span>
        </span>
    </span>
</div>
<div class="font2"> 
    <span>Пример<br>
        <span>отображения <br>
            <span>текста<br>
                <span>с использованием 0.9 rem</span>
            </span>
        </span>
    </span>
</div> 
Пример
отображения
текста
с использованием 0.7 rem
Пример
отображения
текста
с использованием 0.9 rem

em (ex- высота шрифта) — относительная единица самого элемента и размер шрифта масштабируется только относительно свойства font-size (значение шрифта переопределяется в зависимости от вложенности).

Пример использования em css html код

 
 span {
      font-size: 0.7em;
    } 
<span>Пример<br>
        <span>отображения <br>
            <span>текста<br>
                <span>с использованием em</span>
            </span>
        </span>

    </span>
Пример
отображения
текста
с использованием em

% — размер шрифта в процентах относительно родительского элемента.

Пример использования процентов % css html код

 
    div.font3 span {
      font-size: 80%;
    }
<div class="font3">        
    <span>Пример<br>
        <span>отображения <br>
            <span>текста<br>
                <span>с использованием 0.7 em</span>
            </span>
        </span>
    </span>
Пример
отображения
текста
с использованием 0.7 em

Ваш комментарий будет первым

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *