Добрый день, уважаемые читатели!
Сегодня я бы хотел продолжить обсуждение адаптивной верстки.
В прошлой статье мы обсудили, как сделать простенький адаптивный дизайн. После создания мы выявили 1 большой минус:
На небольших экранах изображения будут слишком мелкими.
Как решить проблему? Media Queries!
Данную проблему можно решить благодаря новой возможности CSS: media queries.
С их помощью мы можем отслеживать разрешение экрана пользователя и отображать необходимые стили для каждого разрешения или устройства.
Рассмотрим пример:
@media screen and (max-width: 960px) { .class { background: red; } }
В результате, если у пользователя экран меньше или равен 960 пикселей, то задний фон для класса .class будет красным.
Таким образом мы может подстраивать наши стили под каждый экран в отдельности.
Условия для Media Queries
Условия можно задать следующие условия:
@media screen and (max-width: XXXpx) { } @media screen and (min-width: XXXpx) { } @media screen and (min-width: XXXpx) and (max-width: YYYpx) { } @media screen and (max-device-width: XXXpx) { }
Лично я чаще всего использую первое условие.
Способы подключения CSS-таблиц
Так же можно добавлять условия, для каких экранов будет подключаться та или иная таблица стилей:
<link rel="stylesheet" media="screen and (max-width: 960px)" href="big.css" /> <link rel="stylesheet" media="screen and (min-width: 480px)" href="small.css" /> <!-- для iPhone 4 --> <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> <!-- для iPad portrait and landscape --> <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Практика
Давайте доработаем пример из прошлой статьи:
HTML
<h1>...</h1> <div class="image_gallery"> <div> <img src="../images/1.jpg" title="Деревья, листики..." /> </div> <div> <img src="../images/2.jpg" title="Зима" /> </div> ... </div>
CSS
h1 { font-size: 24px; text-align: center; } div.image_gallery { margin: 0 auto; width: 1000px; text-align: center; max-width: 90%; /* контейнер не превышает 90% ширины экрана */ min-width: 500px; } img { float: left; max-width: 31%; height: auto; padding: 1%; /* небольшие оступы для изображений */ }
Что получилось? Смотрим: демонстрация 1
При небольшом разрешении картинки становятся слишком мелкими, а текст в заголовке огромным.
Решим нашу проблему!
Добавляем Media Queries
Добавим в CSS следующий код:
/* прошлый CSS */ h1 {} div.image_gallery {} img {} @media screen and (max-width: 768px) { /* разрешение планшета */ h1 { font-size: 20px; } div.image_gallery { min-width: 320px; } img { max-width: 48%; /* 2 изображения в ряд */ height: auto; padding: 1%; /* небольшие оступы для изображений */ } }
Мы добавили проверку на разрешение. Если разрешение экрана меньше или равно 768 пикселей, то наша галерея перестраивается. В ряд у нас умещается теперь по 2 изображения (width 48% + padding 2%).
В результате фотографии на экране планшета стали выглядеть намного лучше!
Теперь разберемся с экраном поменьше.
@media screen and (max-width: 480px) { /* разрешение смартфона */ h1 { min-width: 320px; font-size: 16px; } div.image_gallery { width: 320px; min-width: 320px; } img { max-width: 98%; height: auto; padding: 1%; /* небольшие оступы для изображений */ } }
После добавления этого кода при разрешении экрана меньше либо равного 480 пикселей, изображения вновь перестраиваются и теперь отображаются по одному в ряд.
Итог
Теперь мы имеет фотогалерею, которая удобно подстраивается под устройства. При желании можно добавить и другие разрешения (320 пкс, 960 пкс и т.д.).
Ничего сложного и такая хорошая возможность подстроить наш сайт под разные экраны!
Спасибо за внимание, жду вас в следующих статьях! Следующая статья: Адаптивная верстка: анимация
Подписывайтесь на рассылку 😉
Что-то осталось неясным, неточным? Пишите в комментариях!