Приёмы адаптивной вёрстки под различные масштабы и плотность пикселей?
Вёрстка под 1920px на обычном ПК fullhd-мониторе смотрится как на макете. Стоит открыть на ноутбуке (разрешение то же, масштаб в системе установлен на 110%), либо же маке - все элементы начинают выглядеть громадными, сайт не имеет свободных полей по краям.
Вьюпорт установлен как
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Интересует, какие распространены практики, чтобы такого не было, и сайт на всех настольных устройствах смотрелся адекватно? Сам пока попробовал такой вариант: перегнать абсолютно все размеры из px в rem (шрифты, размеры блоков, px в медиа-запросах и т.д.), затем меняю размер шрифта корневого элемента через:
@media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi) { html{ font-size: 14px; } } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { html{ font-size: 12px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { html{ font-size: 11px; } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { html{ font-size: 8px; } } |
@media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi) { html{ font-size: 14px; } } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { html{ font-size: 12px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { html{ font-size: 11px; } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { html{ font-size: 8px; } }
Подход выше решил проблему на десктопах, но испортил картинку на мобильных. Возможно, нужно добавить (min-width: ***), чтобы отсечь эти правила от планшетов/мобильных?
Дополнительно:
Скорее всего неудачно написаны media и остальные правила. И в результате просто что-то вывалилось из контейнеров.
Ретина не влияет на размер шрифта. Для неё нужно готовить только отдельные картинки в 2х или 3х.
110% при исходных 1920 = ~1745
Т.е. на ноутбуке будет отображаться точно также, как если вы выставите в адаптивном режиме эту ширину.
Вот и проверяйте, что там ломается на такой ширине (и на соседних тоже).
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Для создания адаптивной вёрстки под различные масштабы и плотности пикселей существует несколько подходов, которые позволяют вашему сайту отображаться корректно на разных устройствах.
1. Использование медиа-запросов: это позволяет задавать различные стили в зависимости от размера экрана устройства. Например, вы можете указать стили для экранов с шириной менее 768px, 992px и т.д.
@media screen and (max-width: 768px) { /* стили для устройств с шириной экрана до 768px */ } @media screen and (min-width: 769px) and (max-width: 992px) { /* стили для устройств с шириной экрана от 769px до 992px */ } |
@media screen and (max-width: 768px) { /* стили для устройств с шириной экрана до 768px */ } @media screen and (min-width: 769px) and (max-width: 992px) { /* стили для устройств с шириной экрана от 769px до 992px */ }
2. Использование относительных единиц измерения: вместо фиксированных значений (px) лучше использовать относительные единицы измерения, такие как %, em или rem. Например, вместо задания ширины блока в px, можно использовать %:
.container { width: 80%; } |
.container { width: 80%; }
3. Использование гибкой сетки: для создания адаптивного дизайна можно использовать гибкую сетку, основанную на колонках. Это позволяет элементам на странице автоматически изменять свои размеры и расположение в зависимости от размера экрана.
4. Использование viewport meta tag: для корректного отображения на мобильных устройствах важно правильно настроить viewport meta tag. Например, вы можете добавить следующий тег в раздел head вашего HTML документа:
Эти приемы помогут создать адаптивный дизайн, который будет отлично выглядеть на устройствах с разными размерами экранов и плотностью пикселей.
Для создания адаптивной вёрстки, которая будет хорошо отображаться на различных устройствах с разными масштабами и плотностью пикселей, следует использовать следующие приёмы:
1. Использование относительных единиц измерения, таких как проценты (%) или em. Например, вместо задания ширины блока в пикселях, лучше использовать проценты относительно ширины родительского элемента.
.container { width: 80%; margin: 0 auto; }
2. Использование медиазапросов для адаптивности на различных устройствах. Медиазапросы позволяют применять разные стили в зависимости от размера экрана устройства. Например, можно изменить количество столбцов в сетке или размер шрифта.
@media screen and (max-width: 768px) { .column { width: 100%; } }
3. Использование векторной графики вместо растровой. Векторные изображения масштабируются без потери качества и хорошо подходят для адаптивного дизайна.
4. Тестирование на различных устройствах и браузерах. Важно проверить, как ваш сайт выглядит и работает на разных устройствах с разными разрешениями экранов.
5. Использование flexbox или grid для создания гибких и адаптивных сеток. Эти CSS-модели позволяют легко управлять распределением элементов на странице в зависимости от размера экрана.
Надеюсь, эти советы помогут вам создать адаптивный дизайн, который будет отлично выглядеть на любых устройствах с разной плотностью пикселей.