Использую Bootstrap 4.3.1. Все линки сократил, чтобы не засорять код.
Есть вот хтмл-код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link Бутстрап 4.3.1>
<link фонт асоме>
<link анимэйт>
<link главные стили.css>
<link файл с медиа-запросами.css>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-2 offset-1">
<h1>Привет</h1>
</div>
</div>
</div>
</header>
В стилях задал font-size в пикселях для тэга html. Весь остальной фонт-сайз задавал в rem.
html {
font-size: 10px;
line-height: 10px;
}
h1 {
color: #2bce6c;
font: bold 5rem/5rem 'Open Sans', sans-serif;
margin-top: 50px;
margin-bottom: 5px;
}
Соответственно, в файле с медиа-запросами просто перебиваю font-size html-тэга.
// Небольших устройств (альбомной телефоны, 544px и вверх)
@media (min-width: 544px) {
html {
font-size: 3px;
}
}
// Устройствах среднего (планшеты, 768px и выше)
@media (min-width: 768px) {
html {
font-size: 3px;
}
}
ВОТ ПОЛНЫЙ КОД
https://codepen.io/gbreadman13/pen/zQPbLV
Все относительные rem'ы должны меняться. Или нет?
Средний
