Мы собираемся выполнить 3 основных шага:
- html {размер шрифта: 62,5%}
- Используйте «rem» вместо «px»
- Обновить медиа-запрос
Шаг 1
- Установите размер шрифта html на 62,5%
Шаг 2
* Используйте «rem» вместо «px»
* rem относится к размеру шрифта корневого элемента (Html)
* По умолчанию Когда размер шрифта корневого элемента равен 100% = 1rem = 16px
* Так как размер шрифта корневого элемента (html) 62,5% = 1rem = 10px
Примечание. Чтобы использовать бэр в качестве единицы измерения, мы должны разделить единицу пикселей на 10 60 пикселей / 10 = 6 бэр 25 пикселей / 10 = 2,5 бэр.
Шаг 3
* Обновление медиа-запроса
* Теперь на устройствах с разрешением 998 пикселей размер шрифта: 55% = 8,8 пикселей.
* А на устройствах с разрешением 768 пикселей размер шрифта: 45% = 7,2 пикселя.
* Следуя этим шагам, вы можете создать очень отзывчивый веб-сайт.
* Вы также можете изменить свойство отображения в медиа-запросе в соответствии с вашими потребностями.
На этом пока все.
Большое спасибо, что добрались до конца статьи 💙 !
Если вам понравилась эта статья, не забудьте:
Нравится, комментируйте и делитесь с друзьями.
Подпишитесь на меня в Твиттере, чтобы получать ежедневные советы и полезные темы по веб-разработке.
