Сегодня подавляющее большинство людей для выхода в интернет используют мобильные устройства. Поэтому при вёрстке веб-страниц удобнее всего использовать так называемый «Mobile first» подход. Суть подхода заключается в том, чтобы начинать верстать с версии для самого маленького экрана мобильного телефона. Мы сделаем некоторый HTML элемент адаптивным для всех известных размеров экрана. (Примечание: под размером экрана я подразумеваю размер его разрешения, а не физический размер.)
| Брикпойнт | Минимальная ширина | CSS @-правило |
|---|---|---|
| XS | 375px | @media (min-width: 375px) |
| S | 640px | @media (min-width: 640px) |
| M | 768px | @media (min-width: 768px) |
| LG | 1024px | @media (min-width: 1024px) |
| XL | 1280px | @media (min-width: 1280px) |
| XXL | 1536px | @media (min-width: 1536px) |
| XXXL | 2560px | @media (min-width: 2560px) |
HTML:
<h1 class="Header">
Я — заголовок этой страницы
</h1> CSS:
/* Стиль заголовка для самого маленького размера экрана XXS (Two extra small) (стиль по-умолчанию).
Например, для маленького мобильного телефона iPhone SE и подобных.
*/
.Header {
font-size: 1rem;
}
/* Стиль заголовка для очень маленького размера экрана XS (Extra small).
Например, для среднего мобильного телефона iPhone 6/7/8 и большого iPhone 14 Pro Max.
*/
@media (min-width: 375px) {
.Header {
font-size: 1.25rem;
}
}
/* Стиль заголовка для маленького размера экрана S (Small).
Не могу привести пример, потому что не знаю ни одного конкретного устройства с таким разрешением экрана.
Знаю только, что такие есть.
*/
@media (min-width: 640px) {
.Header {
font-size: 1.25rem;
}
}
/* Стиль заголовка для среднего размера экрана M (Medium).
Например, iPad Mini и другие планшеты.
*/
@media (min-width: 768px) {
.Header {
font-size: 1.5rem;
}
}
/* Стиль заголовка для большого размера экрана LG (Large).
Например, iPad Pro или небольшой монитор.
Также этот стиль применится, если повернуть iPad Mini и подобные в горизонтальное положение.
*/
@media (min-width: 1024px) {
.Header {
font-size: 1.75rem;
}
}
/* Стиль заголовка для очень большого размера экрана XL (Extra large).
Например, ноутбук.
*/
@media (min-width: 1280px) {
.Header {
font-size: 2rem;
}
}
/* Стиль заголовка для очень-очень большого размера экрана XXL (Two extra large).
Например, ноутбук с HD 1080p разрешением экрана.
*/
@media (min-width: 1536px) {
.Header {
font-size: 2.25rem;
}
}
/* Стиль заголовка для самого большого размера экрана XXXL (Three extra large).
Например, экран 4K телевизора.
*/
@media (min-width: 2560px) {
.Header {
font-size: 2.5rem;
}
}