<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.

Также к курсу идёт Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Единицы измерения em, rem, vh, vw, vmin, vmax

Единицы измерения em, rem, vh, vw, vmin, vmax

Сегодня мы рассмотрим редко используемые начинающими верстальщиками, относительные единицы измерения в CSS3, такие как, em, rem, vh, vw, vmin, vmax. В основном новичкам более понятны устоявшиеся и стабильные, пиксели и проценты. Но стоит ли, избегать относительно новые единицы измерения?

Единица измерения em

1em равен текущему размеру шрифта относительно родителя. Если у родителя не указан размер шрифта в пикселях, то 1em равен приблизительно 16 пикселям. Однако, если мы укажем другой размер шрифта, например 18 пикселей, то для дочернего элемента, 1em, уже будет равен 18 пикселям.

body {
    font-size: 18px;
}

h2 {
    font-size: 2em; <!-- размер заголовка 36px -->
}

span {
    font-size: 1em; <!-- размер текста 18px -->
}

Преимуществом использования em, состоит в том, что можно очень быстро поменять размеры шрифта во всем документе, поменяв размер шрифта в теге body. Но надо учитывать, что вложенный элемент, унаследует размер шрифта не у тега body, а у своего родителя.

Единица измерения rem

1rem равен текущему размеру шрифта корневого элемента, в документе есть только один корневой документ - это html. Для rem не имеет значение количество вложенных элементов в другие, 1rem всегда будет иметь одинаковый размер в пикселях, как в корневом селекторе.

html {
    font-size: 14px;
}

h3 {
    font-size: 2rem; <!-- размер заголовка 28px -->
}

.text {
    font-size: 1em; <!-- размер текста 14px -->
}

Допустим мы хотим увеличить размер шрифта во всем документе, меняем, только значение у font-size, автоматически пиксели пересчитаются и у всех остальных элементов. Это очень удобно, такой фокус нельзя применить, например к процентам. А казалось бы, какая разница, ведь процент тоже относительная единица измерения.

html {
    font-size: 20px;
}

h3 {
    font-size: 2rem; <!-- размер заголовка 40px -->
}

.text {     font-size: 1em; <!-- размер текста 20px -->
}

Единицы измерения vh, vw

Эти единицы были созданы для определения размеров элементов, относительно высоты и ширины окна браузера, в первую очередь на мобильных устройствах. При изменение размера экрана, элементы с заданными размерами в vh/vw, автоматически масштабируются.

Этот контейнер растянется на всю ширину и высоту браузера, независимо от размеров экрана.

.container {
    width: 100vw;
    height: 100vh;
}

1vh составляет 1% от высоты окна
1vw составляет 1% от ширины окна

Вы спросите: Разве размеры в %, не делают тоже самое, в чем разница? Проценты определяются относительно родительского элемента. А что будет, если у родителя не заданы размеры?

body {
    color: #fff;
}

.child {
    width: 50%;
    height: 50%;
}

У body, размеры не заданы. В таком случае, дочернему блок child, не от чего рассчитывать свои размеры и он не сможет отобразиться на странице. А теперь заменим проценты на vw, vh и блок child займет половину окна просмотра по высоте и ширине.

body {
    color: #fff;
}

.child {
    width: 50vw;
    height: 50vh;
}

Единицы измерения vmin, vmax


vmin – наименьшее из (vw, vh)
vmax – наибольшее из (vw, vh)

Как это работает?

1vmin равен 0.01 от ширины или высоты окна браузера, в зависимости от того, которая из этих двух величин меньше. Например ширина окна смартфона, меньше его высоты. Это значит, что vmin будет рассчитываться относительно ширины.

Зададим ширину и высоту контейнера. Область просмотра не будет выходить за пределы окна смартфона, горизонтальная прокрутка не появится.

.container {
    width: 100vmin;
    height: 100vmin;
}

vmax работает прямо противоположно, рассчитывается относительно большей стороны.

Практическое применение vmin, vmax

При масштабировании шрифтов (размеры шрифта заданы в vw, vh), всегда существует опасность, что текст станет слишком крупным или наоборот мелким. Нам нужно больше контроля над размерами, что-то максимальное и минимальное.

<h1>HERO TEXT</h1>

h1 {
    background: url(https://cdn.pixabay.com/photo/2019/03/11/09/53/car-4048220_1280.jpg) #000;
    background-size: cover;
    background-position: bottom center;
    line-height: 1;
    margin-top: 0;
    font-size: 16vmin;
    font-weight: 900;
    padding: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
}

При уменьшении или увеличении ширины экрана, текст выглядит адекватно.

Единицы измерения em, rem, vh, vw, vmin, vmax.

на смартфонах:

Единицы измерения em, rem, vh, vw, vmin, vmax.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (2):

master284 master284 03.06.2019 11:20:48

Я старый клиент и подписчик Михаила. Сохраняю все письма рассылки в качестве справочника. Данная статья очень важная для любого начинающего верстальщика. Спасибо.

Ответить

ildar.khasanshin ildar.khasanshin 03.06.2019 19:36:50

> Это очень удобно, такой фокус нельзя применить, например к процентам. А казалось бы, какая разница, ведь процент тоже относительная единица измерения. - кажется ниже должен был быть пример с процентами?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.