Меню
Спросить
*.{ }

Урок 6. Единицы измерения в css

18 ноября 2016
Урок 6. Единицы измерения в css

Всем привет сегодня поговорим об единицах измерение в css. Разберем основные единицы и попробуем понять и запомнить, чем они отличаются.

Пиксели

Пиксели(px) или пикселы, кому как угодно. Это фиксированная единица, она не будет растягиваться относительно экрана или окна. К примеру, если в характеристиках вашего монитора указана ширина = 1366, длина 768, к примеру. То у вас будет 1366 пикселей по 768 рядов, а всего будет 1366 умноженное на 768 пикселей. Пиксели примечательны тем, что можно
сверстать сайт с точностью как на макеты из PS к примеру. Минус - это то, что нужно верстать индивидуально для каждого размера окна или экрана.

Проценты

Проценты(%).
Думаю из названия понятно, чем примечательна эта единица. Размер задается в процентах относительно родителя. Например, если у родителя ширина 1000px, у дочернего 10%, то получим ответ от браузера в пикселях, 10 процентов от тысячи, получаем 100px,.
Из плюсов могу выделить:
1. Если задать размеры элемента в процентах, то они будут изменяться относительно изменения размеров родителя.
2. Исходя из 1-го, не всегда нужно писать код под все экраны.
Минусы каждый найдет для себя сам.

Емы

Емы(em). Работают аналогично процентам, но процент вычисляется относительно шрифта родителя.

VW и VH

VW и VH.
Напиши в комментарии, как ты читаешь в слух эти единицы измерения =)

VW - то ширина;
VH - соответственно, длина;

Эти единицы высчитывают процент, относительно видимости вне зависимости от родителя.
Видимость, ты можешь понимать как размеры окна браузера. Если они равны 1366x760 то и процент вычисляться будет относительно этих цифр, если ты уменьшишь размер окна браузера, то и размер поменяется.

Заключение

Не буду больше тебя грузить что и как, открой блокнот и пробуй поиграться с размерами сам =)
Спасибо за внимание, переходи на канал, видео ниже, подписывайся =)

Следующая статьяПредыдущая статья