Что такое медиа-запросов?
Медиа запрос представляет собой метод CSS введены в CSS3.
Он использует @media правило для включения блок свойств CSS только , если определенное условие истинно.
пример
Если окно браузера меньше 500px, цвет фона изменится на Lightblue:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Попробуй сам " Добавление Breakpoint
Ранее в этом учебнике мы сделали веб-страницу с строк и столбцов, и он был отзывчивым, но это хорошо выглядеть на маленьком экране.
Медиа-запросы могут помочь с этим. Мы можем добавить контрольную точку, где некоторые части конструкции будут вести себя по-разному на каждой стороне точки останова.
рабочий стол
Телефон
Используйте медиа-запрос, чтобы добавить точку останова в 768px:
пример
Когда экран (окно браузера) становится меньше, чем 768px, каждый столбец должен иметь ширину 100%:
/* 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%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Попробуй сам " Всегда Дизайн для мобильных устройств Первая
Mobile первое средство разработки для мобильных устройств до разработки для настольного компьютера или любого другого устройства (Это позволит сделать дисплей страницу быстрее на небольших устройствах).
Это означает, что мы должны внести некоторые изменения в нашем CSS.
Вместо того чтобы изменять стили , когда ширина становится меньше , чем 768px, мы должны изменить дизайн , когда ширина становится больше , чем 768px. Это сделает наш дизайн для мобильных First:
пример
/* For mobile phones: */
[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%;}
}
Попробуй сам " Другой Breakpoint
Вы можете добавить столько точек останова, как вам нравится.
Мы также вставить контрольную точку между таблетками и мобильными телефонами.
рабочий стол
таблетка
Телефон
Мы делаем это, добавив еще один медиа-запрос (на 600px), а также набор новых классов для устройств размером более 600 пикселей (но меньше, чем 768px):
пример
Обратите внимание , что два набора классов почти идентичны, единственное отличие это имя ( col- и col-m- ):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.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, чтобы решить , что будет происходить с колоннами в каждой контрольной точке:
HTML Пример
Для рабочего стола:
Первая и третья секция будет охватывать как 3 колонки каждый. Средняя секция будет охватывать 6 столбцов.
Для таблеток:
Первый раздел будет охватывать 3 колонки, второй будет охватывать 9, а третья секция будет отображаться ниже первых двух секций, и он будет охватывать 12 столбцов:
<div class="row">
<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, который будет применяться только тогда, когда окно браузера шире, чем его высота, так называемой "Пейзаж" ориентации:
пример
Веб-страница будет иметь фон Lightblue, если ориентация находится в ландшафтном режиме:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} Попробуй сам "