Адаптивный веб-дизайн -Медиазапросы
Медиазапросы введены в CSS3:CSS3 @media-запросы。
Используя @media-запросы, можно определять разные стили для разных типов медиа.
Пример
Если окно браузера меньше 500px, фон станет светло-синим:
body {
background-color: lightblue;
}
}
Попробуйте сами »
Добавление точек останова
В предыдущем уроке мы использовали строки и столбцы для создания веб-страниц. Они адаптивны, но плохо отображаются на маленьких экранах.
Медиазапросы могут помочь решить эту проблему. Мы можем добавить точки останова в середине дизайна, и разные точки останова дают разный эффект.
Настольные устройства
Мобильные устройства
Используйте медиазапрос, чтобы добавить точку останова на 768px:
Пример
Когда экран (окно браузера) меньше 768px, ширина каждого столбца равна 100%:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* Для мобильных телефонов: */
[class*="col-"] {
width: 100%;
}
}
Попробуйте сами »
Дизайн Mobile-First
Mobile-first означает приоритет мобильного дизайна при проектировании для настольных компьютеров и других устройств.
Это означает, что нам нужно внести некоторые изменения в CSS.
Мы изменяем стили, когда экран меньше 768px, а также нужно изменять стили, когда ширина экрана больше 768px. Вот пример mobile-first:
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Другие контрольные точки
Вы можете добавить контрольные точки в соответствии с вашими потребностями.
Мы также можем задать контрольные точки для планшетных устройств и мобильных телефонов.
Настольные устройства
Планшетные устройства
Мобильные устройства
Добавьте медиазапрос, когда ширина экрана равна 600px, и задайте новые стили (экран больше 600px, но меньше 768px):
Пример
Обратите внимание, что два набора стилей классов одинаковы, но имена разные (col- и col-m-):
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* Для планшетов: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Попробуйте сами »
Приведённый выше код может показаться избыточным, но он позволяет автоматически задавать разные стили в зависимости от размера экрана, поэтому он всё ещё очень необходим.
Примеры HTML
Для настольных устройств:
Первая и третья секции занимают 3 столбца. Средняя секция занимает 6 столбцов.
Для планшетных устройств:
Первая занимает 3 столбца, вторая секция занимает 9 столбцов, а третья занимает 12 столбцов:
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>
Ориентация: альбомная/портретная
В сочетании с медиазапросами CSS можно создавать макеты, которые адаптируются к ориентации различных устройств (альбомная, портретная и т. д.).
Синтаксис:
orientation：portrait | landscape
- portrait：Указывает, что высота видимой области страницы на устройстве вывода больше или равна ширине.
- landscape：За исключением случая со значением portrait, все остальные относятся к альбомной ориентации.
Пример
Если ориентация альбомная, фон будет светло-голубым:
body {
background-color: lightblue;
}
}
Попробуйте сами »