Адаптивный веб-дизайн - медиа-запросы
Средства массовой информации (СМИ) ввели запрос на 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) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Попробуйте »
Приоритет для мобильного терминала дизайна
Приоритет означает переход конечных настольные компьютеры и другие устройства, предназначенные для отдавать приоритет мобильного терминала дизайна.
Это означает, что мы должны сделать некоторые изменения в CSS.
Мы экран менее 768px в изменении стиля должны быть изменены в том же стиле, когда экран шире, чем 768px. Ниже приведены примеры мобильного конечного приоритета:
[Класс = "сталкивающихся"] {
ширина: 100%;
}
@media только экран и (мин-ширина : 768px) {
/ * Для рабочего стола: * /
.col-1 {ширина: 8,33% ;}
.col-2 {ширина: 16,66% ;}
.col-3 {ширина: 25% ;}
.col-4 {ширина: 33,33% ;}
.col-5 {ширина: 41,66% ;}
.col-6 {ширина: 50% ;}
.col-7 {ширина: 58,33% ;}
.col-8 {ширина: 66,66% ;}
.col-9 {ширина: 75% ;}
.col-10 {ширина: 83,33% ;}
.col-11 {ширина: 91,66% ;}
.col-12 {ширина: 100% ;}
}
Другие точки останова
Вы можете добавить точку останова в соответствии с их потребностями.
Мы можем также планшет и мобильный телефон устройства устанавливать контрольные точки.
рабочий стол
таблетка
Мобильные устройства
600px экран при добавлении запросов средств массовой информации, а также установить новый стиль (но меньше, чем экран больше, чем 600px 768px):
примеров
Обратите внимание, что два стиля класса одни и те же, но разные имена (сталкивающихся и Col-м-):
[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 Примеры
Для рабочего стола:
Первый и третий раздел охватывает три. Промежуточная часть междоменное 6.
Для планшетных устройств:
Первый междоменное 3, вторая секция охватывает 9, третья часть междоменная 12:
<Div класс = "Col-3 Col-м-3"> ... </ DIV>
<Div класс = "Col-6 Col-м-9"> ... </ DIV>
<Div класс = "Col-3 Col-м-12"> ... </ DIV>
</ Div>
Направление: горизонтальный экран / вертикальный экран
В сочетании с запросами CSS СМИ, вы можете создать приспособиться к различной ориентации устройства (ландшафтный пейзаж, портрет портрет и т.д.) макета.
Синтаксис:
orientation：portrait | landscape
- портрет: указывать устройство вывода в видимой области спектра от высоты страницы больше или равна ширине
- пейзаж: значение интер портретных обстоятельств являются пейзаж
примеров
Если фоновый вертикальный экран будет светло-голубой:
тело {
цвет фона: Lightblue;
}
}
Попробуйте »