Помимо использования медиа-запросов и современных макетов CSS, таких как flexbox и grid, для создания адаптивных веб-сайтов, есть некоторые упущенные из виду вещи, чтобы верстать адаптивные сайты.
В этой статье мы рассмотрим ряд инструментов (вращающихся вокруг HTML и CSS), которые у нас есть наготове, от адаптивных изображений до относительно новых функций CSS, которые работают корректно, независимо от того, используем мы медиа-запросы или нет.
Фактически, медиа-запросы при использовании с этими функциями становятся скорее дополнением, чем готовым решением. Посмотрим, как это работает.
По настоящему адаптивные изображения
Помните, когда мы могли просто увеличить ширину, указав 100% для картинки и, как говориться, "дело в шляпе"? Это, конечно, по-прежнему работает , но есть ряд недостатков, наиболее заметные из которых:
1. Изображение может сжаться до такой степени, что потеряет фокус.
2. Мобильные гаджеты по-прежнему загружают полноразмерное изображение.
При использовании изображений в Интернете мы должны убедиться, что они оптимизированы с точки зрения разрешения и размера. Причина в том, чтобы у нас было правильное разрешение изображения, подходящее для правильного устройства, чтобы мы не загружали действительно большие и тяжелые изображения для небольших экранов, что значительно снижает производительность сайта.
Проще говоря, мы обеспечиваем отправку больших изображений с высоким разрешением на большие экраны, а меньшие варианты с низким разрешением - на меньшие экраны, улучшая как производительность, так и удобство использования.
HTML предлагает элемент <picture>, который позволяет нам указать точный ресурс изображения, который будет отображаться на основе добавляемого нами медиа-запроса. Как описано ранее, вместо того, чтобы отправлять одно изображение (обычно это большая версия картинки с высоким разрешением) на все размеры экрана и масштабировать его до ширины области просмотра, мы указываем набор изображений, которые будут использоваться в определенных ситуациях.
<picture>
<source media="(max-width:1000px)" srcset="picture-lg.png">
<source media="(max-width:600px)" srcset="picture-mid.png">
<source media="(max-width:400px)" srcset="picture-sm.png">
<img src="picture.png" alt="picture"">
</picture>
В этом примере picture.png - это полноразмерное изображение. Оттуда мы определяем следующую по величине версию изображения, picture-lg.png, размер уменьшаем в порядке убывания до самой маленькой версии, picture-sm.png. Обратите внимание, что в этом подходе мы по-прежнему используем медиа-запросы, но именно элемент <picture> определяет адаптивное поведение, а не определяет точки останова в CSS.
Медиа-запросы добавляются в соответствии с масштабом изображения:
- Окна просмотра размером 1000 пикселей и выше получают файл picture.png.
- Окна просмотра размером от 601 до 999 пикселей получают файл picture-lg.png.
- Окна просмотра размером от 401 до 600 пикселей получают изображение-sm.png.
- Все, что меньше 400 пикселей, получает изображение-sm.png.
Интересно, что мы также можем пометить каждое изображение по плотности изображения - 1x, 2x, 3x и так далее - после URL-адреса. Это работает, если мы сделали разные изображения пропорционально друг другу (что мы и сделали). Это позволяет браузеру определять, какую версию загружать, на основе плотности пикселей экрана в дополнение к размеру области просмотра. Но обратите внимание, сколько изображений мы в итоге определяем:
<picture>
<source media="(max-width:1000px)" srcset="picture-lg_1x.png 1x, picture-lg_2x.png 2x, picture-lg_3x.png 3x">
<source media="(max-width:600px)" srcset="picture-mid_1x.png 1x, picture-mid_2x.png 2x, picture-mid_3x.png 3x">
<source media="(max-width:400px)" srcset="picture-small_1x.png 1x, picture-small_2x.png 2x, picture-small_1x.png 3x">
<img src="picture.png" alt="picture"">
</picture>
Давайте конкретно рассмотрим два тега, вложенные в элемент <picture>: <source> и <img>.
Браузер будет искать первый элемент <source>, в котором медиа-запрос соответствует текущей ширине области просмотра, а затем отобразит правильное изображение (указанное в атрибуте srcset). Элемент <img> требуется как последний дочерний элемент элемента <picture> в качестве альтернативного варианта, если ни один из исходных тегов источника не совпадает.
Мы также можем использовать плотность изображения для обработки адаптивных изображений с помощью только элемента <img>, используя атрибут srcset:
<img
srcset="
flower4x.png 4x,
flower3x.png 3x,
flower2x.png 2x,
flower1x.png 1x
"
src="flower-fallback.jpg"
>
Еще мы можем написать медиа-запросы в CSS на основе разрешения экрана (обычно измеряемого в точках на дюйм или dpi) самого устройства, а не только области просмотра устройства. Это означает, что вместо:
@media only screen and (max-width: 600px) {
/* Style stuff */
}
Теперь у нас есть:
@media only screen and (min-resolution: 192dpi) {
/* Style stuff */
}
Этот подход позволяет нам диктовать, какое изображение отображать на основе разрешения экрана самого устройства, что может быть полезно при работе с изображениями с высоким разрешением. По сути, это означает, что мы можем отображать изображения высокого качества для экранов, которые поддерживают более высокое разрешение, и меньшие версии при более низком разрешении. Стоит отметить, что, хотя мобильные устройства имеют небольшие экраны, обычно они имеют высокое разрешение. Это означает, что, вероятно, не лучшая идея полагаться только на разрешение при определении изображения для рендеринга. Это может привести к передаче больших изображений с высоким разрешением на действительно маленькие экраны, что может быть не той версией, которую мы действительно хотим отображать на таком маленьком экране.
body {
background-image : picture-md.png; /* the default image */
}
@media only screen and (min-resolution: 192dpi) {
body {
background-image : picture-lg.png; /* higher resolution */
}
}
Что дает нам <picture>, так это способность напрямую управлять изображениями. И, в соответствии с этой идеей, мы можем использовать функции CSS, такие как свойство object-fit, которое при использовании с object-position позволяет нам обрезать изображения для лучшей фокусировки, сохраняя при этом соотношение сторон изображения.
Итак, чтобы изменить фокус изображения:
@media only screen and (min-resolution: 192dpi) {
body {
background-image : picture-lg.png;
object-fit: cover;
object-position: 100% 150%; /* moves focus toward the middle-right */
}
}
Установка минимального и максимального значений в CSS
Функция min () указывает абсолютный наименьший размер, до которого может уменьшиться элемент. Эта функция оказывается действительно полезной с точки зрения помощи размерам текста для правильного масштабирования на разных размерах экрана, например, никогда не позволять плавному шрифту опускаться ниже разборчивого размера шрифта:
html {
font-size: min(1rem, 22px); /* Stays between 16px and 22px */
}
min () принимает два значения, и они могут быть относительными, процентными или фиксированными. В этом примере мы говорим браузеру, что никогда не позволяйте элементу с классом .box опуститься ниже 45% ширины или 600 пикселей, в зависимости от того, что меньше, в зависимости от ширины области просмотра:
.box {
width : min(45%, 600px)
}
Если 45% вычисляет значение меньше 600 пикселей, браузер использует 45% в качестве ширины. И наоборот, если 45% вычисляет значение больше 600 пикселей, тогда 600 пикселей будет использоваться для ширины элемента.
То же самое и с функцией max (). Он также принимает два значения, но вместо того, чтобы указывать наименьший размер для элемента, мы определяем наибольший, который он может получить.
.box {
width : max(60%, 600px)
}
Если 60% вычисляет значение больше 600 пикселей, браузер использует 60% в качестве ширины. С другой стороны, если 60% вычисляет значение меньше 600 пикселей, тогда 600 пикселей будет использоваться в качестве ширины элемента.
Значения Clamping
Об этой чудесной функции я уже писал в данной статье.
Работа с адаптивными модулями
Вы когда-нибудь создавали страницу с большим заголовком или подзаголовком и восхищались тем, как хорошо она выглядит на экране рабочего стола, только для того, чтобы проверить ее на мобильном устройстве и обнаружить, что она слишком велика? Я определенно был в такой ситуации, и в этом разделе я объясню, как справляться с такими проблемами.
В CSS вы можете определять размеры или длину элементов, используя различные единицы измерения, и наиболее часто используемые единицы измерения включают: px, em, rem,%, vw и vh. Хотя есть еще несколько единиц, которые используются не так часто. Нас интересует то, что пиксель можно рассматривать как абсолютную единицу, а остальные - как относительные.
Абсолютные единицы
Пиксель (пиксель) считается абсолютной единицей в основном потому, что он фиксирован и не изменяется в зависимости от измерения любого другого элемента. Его можно рассматривать как базовую или корневую единицу, которую используют некоторые другие относительные единицы.
Относительные единицы
Относительные единицы, такие как%, em и rem, лучше подходят для адаптивного дизайна в основном из-за их способности масштабироваться для разных размеров экрана.
vw: относительно ширины области просмотра
vh: относительно высоты области просмотра.
rem: относительно корневого (<html>) элемента (размер шрифта по умолчанию обычно составляет 16 пикселей)
em: относительно родительского элемента
%: Относительно родительского элемента
Опять же, размер шрифта по умолчанию для большинства браузеров составляет 16 пикселей, и именно это единицы rem используют для генерации своих вычисленных значений. Итак, если пользователь настраивает размер шрифта в браузере, все на странице правильно масштабируется в зависимости от размера корневого каталога. Например, при работе с корневым элементом, установленным на 16 пикселей, указанное вами число умножит это число на размер по умолчанию. Например:
.8rem = 12.8px (.8 * 16)
1rem = 16px (1 * 16)
2rem = 32px (2 * 16)
Что, если вы или пользователь измените размер по умолчанию? Как мы уже говорили, это относительные единицы, и окончательные значения размера будут основаны на новом базовом размере. Это оказывается полезным в медиа-запросах, когда вы просто меняете размер шрифта, и вся страница масштабируется соответственно вверх или вниз.
Например, если вы изменили размер шрифта на 10 пикселей в CSS, то рассчитанные размеры в конечном итоге будут такими:
html {
font-size : 10px;
}
1rem = 10px (1 * 10)
2rem = 20px (2 * 10)
.5rem = 5px (.5 * 10)
То же самое относится и к %. Например:
100% = 16px;
200% = 32px;
50% = 8px;
А в чем разница между единицами rem и em? Это то, что единица использует в качестве основного элемента. rem вычисляет значения, используя размер шрифта корневого (<html>) элемента, тогда как элемент, объявляющий значения em, ссылается на размер шрифта родительского элемента, который его содержит. Если размер указанного родительского элемента отличается от размера корневого элемента (например, размер родительских элементов составляет 18 пикселей, а размер корневого элемента - 16 пикселей), то em и rem будут преобразовываться в разные вычисленные значения. Это дает нам более точный контроль над тем, как наши элементы реагируют в разных контекстах.
vh - это аббревиатура от высоты области просмотра или высоты видимого экрана. 100vh представляют 100% высоты области просмотра (в зависимости от устройства). Точно так же vw обозначает ширину области просмотра, означающую ширину видимого экрана устройства, а 100vw буквально представляет 100% ширины области просмотра.
Выходя за рамки медиа-запросов
Видеть, что? Мы только что рассмотрели ряд действительно мощных и относительно новых функций HTML и CSS, которые дают нам дополнительные (и, возможно, более эффективные) способы создания адаптивного дизайна. Это не значит, что эти новомодные техники заменяют то, что мы делали все это время. Это просто дополнительные инструменты в нашем наборе инструментов разработчика, которые дают нам больший контроль, чтобы определять, как элементы ведут себя в разных контекстах. Независимо от того, работает ли он с размерами шрифта, разрешением, шириной, фокусом или любым другим, у нас есть более точный контроль взаимодействия с пользователем, чем когда-либо прежде.
Итак, в следующий раз, когда вы обнаружите, что работаете над проектом, в котором вы хотели бы иметь больше контроля над точным внешним видом дизайна на конкретных устройствах, подумайте, как нативный HTML и CSS могут вам помочь в этом.