English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS медиа-запросы позволяют вам форматировать документ так, чтобы он правильно отображался на устройствах различного размера.
Медиа-запросы позволяют вам настраивать способ отображения веб-страниц для конкретного диапазона устройств (например, смартфонов, планшетов, компьютеров и т.д.), не изменяя маркировки. Медиа-запросы состоят из типа媒体 и одного или нескольких выражений, которые соответствуют определенным функциям конкретного媒体 (например, ширине устройства или разрешению экрана).
Поскольку медиа-запросы являются логическими выражениями, их можно интерпретировать как true или false. Если указанный в медиа-запросе тип媒体的 и устройство, на котором отображается документ, соответствуют и удовлетворяют всем выражениям медиа-запроса, то результат запроса составляет true. Когда медиа-запрос equals true, соответствующие таблицы стилей или правила стилей применяются к целевому устройству. Это простой пример стандартного запроса медиа-устройства.
/* Смартфоны (портрет и ландскейт) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px) {
/* styles */
}
/* Смартфоны (ландскейт) ---------- */
@media screen and (max-width: 320px) {
/* styles */
}
/* Смартфоны (портрет) ---------- */
@media screen and (min-width: 321px) {
/* styles */
}
/* Таблеты, iPad (портрет и ландшафт) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
/* styles */
}
/* Таблеты, iPad (портрет) ---------- */
@media screen and (min-width: 768px){
/* styles */
}
/* Таблеты, iPad (ландшафт) ---------- */
@media screen and (min-width: 1024px){
/* styles */
}
/* Десктопы и ноутбуки ---------- */
@media screen and (min-width: 1224px){
/* styles */
}
/* Большой экран ---------- */
@media screen and (min-width: 1824px){
/* styles */
}Проверьте, пожалуйста‹/›Совет:Медиазапросы - это excelente способ создания адаптивной вёрстки. Используя медиазапросы, вы можете различно настроить сайт для пользователей,浏览智能手机或平板电脑等设备， не изменяя фактического содержимого страницы.
Вы можете использовать CSS-медиазапросы для изменения ширины веб-страницы и связанных элементов, чтобы обеспечить пользователям оптимальный опыт просмотра на различных устройствах.
Следующие правила стиля будут автоматически изменять ширину элемента контейнера в зависимости от размера экрана или области просмотра. Например, если ширина области просмотра меньше 768 пикселей, она будет занимать 100% ширины области просмотра, если она больше 768 пикселей, но меньше 1024 пикселей, то будет 750 пикселей и т.д.
.container {
margin: 0 auto;
background: #f2f2f2;
box-sizing: border-box;
}
/* Мобильные телефоны (портрет и ландшафт) ---------- */
@media screen and (max-width: 767px){
.container {
width: 100%;
padding: 0 10px;
}
}
/* Таблеты и iPad (портрет и ландшафт) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
.container {
width: 750px;
padding: 0 10px;
}
}
/* Низкое разрешение десктопов и ноутбуков ---------- */
@media screen and (min-width: 1024px) {
.container {
width: 980px;
padding: 0 15px;
}
}
/* Высокое разрешение десктопов и ноутбуков ---------- */
@media screen and (min-width: 1280px) {
.container {
width: 1200px;
padding: 0 20px;
}
}Проверьте, пожалуйста‹/›Обратите внимание:Вы можете использовать CSS3 для элементов Настройка размера рамкиСвойства, чтобы легко создавать более直观ные и гибкие макеты.
Вы также можете использовать CSS медиа-запросы, чтобы сделать вашу многостраничную веб-разметку более адаптивной, и вам потребуется всего несколько настроек для адаптации к устройству.
Если размер экрана больше или равен 768 пикселям, то следующие правила стиля создадут двухколонный макет, но если меньше или равен 768 пикселям, он будет представлен в виде одной колонки.
.column {
width: 48%;
padding: 0 15px;
box-sizing: border-box;
background: #93dcff;
float: left;
}
.container .column:first-child{
margin-right: 4%;
}
@media screen and (max-width: 767px){
.column {
width: 100%;
padding: 5px 20px;
float: none;
}
.container .column:first-child{
margin-right: 0;
margin-bottom: 20px;
}
}Проверьте, пожалуйста‹/›