Media only screen: Использование медиавыражений — CSS | MDN

The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

@media (min-width: 30em) and (orientation: landscape) { ... }

To limit the styles to devices with a screen, you can chain the media features to the screen media type:

@media screen and (min-width: 30em) and (orientation: landscape) { . ..  }

comma-separated lists

You can use a comma-separated list to apply styles when the user’s device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user’s device has either a minimum height of 680px or is a screen device in portrait mode:

@media (min-height: 680px), screen and (orientation: portrait) { ... }

Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

@media not all and (monochrome) { ... }

… so that the above query is evaluated like this:

@media not (all and (monochrome)) { ... }

… rather than like this:

@media (not all) and (monochrome) { ... }

As another example, the following media query:

@media not screen and (color), print and (color) { ... }

… is evaluated like this:

@media (not (screen and (color))), print and (color) { ... }

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.

<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />

• Media types (en-US)
• Media features (en-US)
• Testing media queries using code (en-US)
• CSS Animations Between Media Queries
• Extended Mozilla media features (en-US)
• Extended WebKit media features (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 13 авг. 2022 г. by MDN contributors.

Медиа-запросы | htmlbook.ru

Краткая информация

Версии CSS

Описание

Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.

Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.

Синтаксис

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.

Логические операторы, применяемые в медиа-запросах

and

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

@media all and (color) { ... }

not

Логическое НЕ. Указывается для отрицания условия.

Пример. Стиль для всех устройств кроме смартфонов

@media all and (not handheld) { ... }

Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение

@media not all and (color) { ... }

следует понимать как

@media not (all and (color)) { ... }

а не

@media (not all) and (color) { ... }

only

Применяется для старых браузеров, которые не поддерживают медиа-запросы.

Пример. Стиль для новых браузеров

@media only all and (not handheld) { ... }

В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.

Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.

@media all and (orientation: landscape), all and (min-width: 480px) { ... }

Также при использовании операторов следует указывать скобки, чтобы менять приоритет операций.

Медиа-функции

Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселов.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).

color (min-color, max-color)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2³ цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.

Пример 1. Стиль для цветных устройств

@media screen and (color) { /* Для цветных экранов */
  body { background: #fc0; }
}
@media screen and (min-color:3) { /* Минимум 512 цветов */
  body { background: #ccc; }
}

color-index (min-color-index, max-color-index)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет количество цветов, которое поддерживает устройство. В примере 2 показан стиль для экранов отображающих не меньше 256 цветов.

Пример 2. Цветной дисплей

@media all and (min-color-index: 256) {
 . ..
}

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.

Пример 3. «Киношное» соотношение

@media screen and (min-device-aspect-ratio: 16/9) {
 ...
}

device-height (min-device-height, max-device-height)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную высоту экрана устройства или печатной страницы.

device-width (min-device-width, max-device-width)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.

Пример 4. Ширина макета

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина макета</title>
  <style>
   div {
    padding: 10px;
    background: #e8bfad;
    margin: auto;
   }
   @media screen and (min-device-width: 1600px) {
    div {width: 1500px;}
   }
   @media screen and (device-width: 1280px) {
    div {width: 1100px;}
   }
   @media screen and (device-width: 1024px) {
    div {width: 980px;}
   }
  </style>
 </head>
 <body>
  <div>
   Диабаз, формируя аномальные геохимические ряды, сменяет известняк, 
   образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.
  </div>
 </body>
</html>

grid

Тип носителя: all
Значение: нет

Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.

Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).

Пример 5. Размер букв

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стиль для бабушкофона</title>
  <style>
   @media handheld and (grid) and (max-width: 15em) {
     body { font-size: 2em; }
   }
  </style>
 </head>
 <body>
  <p>Привет! Как дела? Как сажа бела?</p>
 </body>
</html>

height (min-height, max-height)

Тип носителя: все кроме speech
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

Пример 6. Стиль для принтера

@media print and (monochrome) { 
 body { font-family: Times, 'Times New Roman', serif; }
h2, h3, p { color: black; }
}
@media print and (color) { 
 body { font-family: Arial, Verdana, sans-serif; }
h2, h3, p { color: #556b2f; }
}

orientation

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

Пример 7. Использование ориентации устройства

@media screen and (orientation: landscape) { 
  #logo { background: url(logo1.png) no-repeat; }
}
@media screen and (orientation: portrait) { 
  #logo { background: url(logo2. png) no-repeat; }
}

resolution (min-resolution, max-resolution)

Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.

Пример 8. Разрешение принтера

@media print and (min-resolution: 300dpi) { 
 ...
}

scan

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: все кроме speech
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Пример 9. Использование max-width

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина страницы</title>
  <style>
   body { background: #f0f0f0; }
   @media screen and (max-width: 600px) {
     body { background: #fc0; }
   }
  </style>
 </head>
 <body>
  <p>Пока магма остается в камере, мусковит сингонально поднимает шток, 
  в то время как значения максимумов изменяются в широких пределах. </p>
 </body>
</html>

Media Queries медиа запросы CSS уроки для начинающих академия

❮ Назад Дальше ❯

CSS Media запросы-больше примеров

Рассмотрим еще несколько примеров использования медиа-запросов.

Мультимедийные запросы — это популярный способ доставки адаптированной таблицы стилей к различным устройствам. Чтобы продемонстрировать простой пример, мы можем изменить цвет фона для различных устройств:

Пример

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

Вы удивляетесь, почему мы используем именно 992пкс и 600px? Это то, что мы называем «типичными точками останова» для устройств. Более подробную информацию о типичных точках останова можно прочитать в руководстве по адаптивному веб-дизайну.

Запросы мультимедиа для меню

В этом примере мы используем мультимедийные запросы для создания адаптивного меню навигации, которое изменяется в дизайне на разных размерах экрана.

Large screens:

Home Link 1 Link 2 Link 3

Small screens:

Home Link 1 Link 2 Link 3

Пример

/* The navbar container */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Navbar links */
.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}

Запросы носителей для столбцов

Обычное использование мультимедийных запросов — это создание гибкого макета. В этом примере мы создаем макет, который варьируется от четырех, двух и полной ширины столбцов, в зависимости от различных размеров экрана:

Большие экраны:

Средние экраны:

Малые экраны:

Пример

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Совет: Более современный способ создания макетов столбцов — использование CSS Flexbox (см. пример ниже). Тем не менее он не поддерживается в Internet Explorer 10 и более ранних версиях. Если вам необходима поддержка IE6-10, используйте float (как показано выше).

Чтобы узнать больше о модуле макета гибкой коробки, прочитайте нашу главу CSS Flexbox.

Чтобы узнать больше о адаптивном веб-дизайне, прочитайте наш отзывчивый веб-дизайн учебника.

Пример

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

Скрытие элементов с помощью запросов мультимедиа

Другим распространенным использованием мультимедийных запросов является скрытие элементов на различных размерах экрана:

Я буду скрыта на маленьких экранах.

Пример

/* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Изменение размера шрифта с помощью запросов мультимедиа

Также можно использовать запросы мультимедиа для изменения размера шрифта элемента на различных размерах экрана:

Пример

/* If screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

/* If screen size is 600px wide, or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Гибкая Галерея изображений

В этом примере мы используем мультимедийные запросы вместе с Flexbox для создания адаптивной галереи изображений:

Пример

Гибкий сайт

В этом примере мы используем мультимедийные запросы вместе с Flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент.

Пример

Ориентация: портрет/пейзаж

Мультимедийные запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера.

Вы можете иметь набор свойств CSS, которые будут применяться только в том случае, если окно обозревателя шире, чем его высота, так называемая «Ландшафтная» ориентация:

Пример

Используйте цвет фона лигхтблуе, если ориентация находится в альбомном режиме:

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

Минимальная ширина до максимальной ширины

Можно также использовать значения (max-width: ..) and (min-width: ..) для задания минимальной ширины и максимальной ширины.

Например, если ширина обозревателя находится между 600 и 900px, измените внешний вид элемента <div>:

Пример

@media screen and (max-width: 900px) and (min-width: 600px) {
  div. example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Использование дополнительного значения: В приведенном ниже примере мы добавляем дополнительный мультимедийный запрос к уже существующему, используя запятую (это будет вести себя как оператор OR):

Пример

/* When the width is between 600px and 900px OR above 1100px — change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

CSS @media ссылка

Для полного обзора всех типов носителей и функций/выражений, пожалуйста, посмотрите на @media правило в нашей ссылке CSS.

Совет: Чтобы узнать больше о адаптивном веб-дизайне (как ориентироваться на различные устройства и экраны), используя точки останова для запросов мультимедиа, прочитайте наш учебник по адаптивному веб-дизайну.

❮ Назад Дальше ❯

Правило CSS @media

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Измените цвет фона элемента на «светло-синий», когда окно браузера имеет ширину 600 пикселей или меньше:

@media only screen and (max-width: 600px) {
  body {
    цвет фона: голубой;
  }
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

---

Определение и использование

Правило @media используется в медиа-запросах для применения разных стилей для разных типов медиа/устройств.

Медиа-запросы можно использовать для проверки многих вещей, таких как:

• ширина и высота окна просмотра
• ширина и высота устройства
• ориентация (планшет/телефон в альбомной или портретной ориентации?)
разрешение

Использование медиа-запросов является популярным методом предоставления индивидуального стиля лист (отзывчивый веб-дизайн) на настольные компьютеры, ноутбуки, планшеты и мобильные телефоны.

Вы также можете использовать медиа-запросы, чтобы указать, что определенные стили предназначены только для печатных документов или программ чтения с экрана (тип медиа: печать, экран или речь).

В дополнение к типам носителей существуют также характеристики носителей. Медиа-функции предоставить более подробную информацию для медиа-запросов, позволяя проверить специфическая функция пользовательского агента или устройства отображения. Например, вы может применять стили только к тем экранам, которые больше или меньше, чем определенной ширины.

---

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает правило @media.

Собственность
@медиа	21	9	3,5	4,0	9

---

---

Синтаксис CSS

@media not|only mediatype и (медиафункция и|или|не mediafeature) {
  CSS-код;
}

значение не , только и и ключевых слов:

не: Ключевое слово not инвертирует значение всего медиа запрос.

Только : Ключевое слово only не позволяет старым браузерам, не поддерживающим мультимедийные запросы с мультимедийными функциями, применять указанные стили. Не влияет на современные браузеры.

и: Ключевое слово and объединяет мультимедийную функцию с мультимедийной тип или другие медиа-функции.

Все они необязательны. Однако, если вы используете , а не или только , необходимо также указать тип носителя.

У вас также могут быть разные таблицы стилей для разных носителей, например это:

….

---

---

Другие примеры

Пример

Скрыть элемент, если ширина браузера не превышает 600 пикселей: : никто;
}
}

Попробуйте сами »

Пример

Используйте медиазапросы, чтобы установить лавандовый цвет фона, если окно просмотра 800 пикселей в ширину или шире, до светло-зеленого, если окно просмотра имеет ширину от 400 до 799 пикселей. Если область просмотра меньше 400 пикселей, цвет фона светло-голубой:

body {
  цвет фона: голубой;
}

Экран @media и (min-width: 400 пикселей) {
  тело {
цвет фона: светло-зеленый;
  }
}

@медиа экран и (минимальная ширина: 800 пикселей) {
  тело {
цвет фона: лаванда;
  }
}

Попробуйте сами »

Пример

Создайте адаптивное меню навигации (отображаемое горизонтально на больших экранах и вертикально на маленьких экранах):

Экран @media и (максимальная ширина: 600 пикселей) {
  .topnav a {
поплавок: нет;
    ширина: 100%;
}
}

Попробуйте сами »

Пример

Используйте мультимедийные запросы для создания адаптивного макета столбца:

/* На экранах шириной 992 пикселя или меньше увеличьте количество столбцов с четырех до двух. столбцы */
@media screen и (максимальная ширина: 992 пикселя) {
  .column {
ширина: 50%;
  }
}

/* На экранах шириной 600 пикселей или меньше сделайте столбцы стопкой друг над другом, а не рядом */
Экран @media и (max-width: 600px) {
  .column {
    ширина: 100%;
  }
}

Попробуйте сами »

Пример

Используйте медиа-запросы для создания адаптивного веб-сайта:

Попробуйте сами »

Пример

Медиа-запросы также можно использовать для изменения макета страницы в зависимости от макета страницы. в ориентация браузера. У вас может быть набор свойств CSS, которые будут применяются, когда окно браузера шире своей высоты, так называемый «пейзаж» ориентация.

Используйте светло-голубой цвет фона, если ориентация находится в ландшафтном режиме:

Только экран @media и (ориентация: пейзаж) {
  тело {
цвет фона: голубой;
  }
}

Попробуйте сами »

Пример

Используйте медиазапросы, чтобы установить зеленый цвет текста, когда документ отображается на экране и становится черным при печати:

@media screen {
  body {
цвет: зеленый;
  }
}

@media print {
  тело {
    цвет: черный;
  }
}

Попробуйте сами »

Пример

Список, разделенный запятыми : добавьте дополнительный медиазапрос к уже существующему, используя запятую (это будет работать как оператор ИЛИ):

/* Если ширина составляет от 600 до 900 пикселей ИЛИ больше 1 100 пикселей, измените внешний вид

*/
@media screen и (max-width: 900px) и (минимальная ширина: 600 пикселей), (минимальная ширина: 1100 пикселей) {
  раздел. пример {
размер шрифта: 50px;
    отступ: 50 пикселей;
граница: 8 пикселей, сплошной черный цвет;
    фон: желтый;
}
}

Попробуйте сами »

---

Связанные страницы

Учебник CSS: CSS Media Queries

Учебник CSS: Примеры медиазапросов CSS

Учебник RWD: Отзывчивый веб-дизайн с помощью медиазапросов window02 The00 JavaScript 90 Tutorial 90 Метод .matchMedia()

❮ Предыдущий Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

902 02 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Свойство минимального размера блока CSS

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Установите минимальный размер элемента

равным 200 пикселям в направлении блока:

div {
  min-block-size: 200px;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

---

Определение и использование

Свойство min-block-size задает минимальный размер элемента в направлении блока.

Если содержимое меньше минимального размера в направлении блока, 9Будет применено значение свойства 0024 min-block-size .

Если содержимое больше минимального размера в направлении блока, значение свойства min-block-size не действует.

Примечание: Связанное свойство CSS write-mode определяет направление блока, и это влияет на результат свойства min-block-size . Для страниц на английском языке направление блока — вниз, а направление строки — слева направо.

УС 9Свойство 0024 min-block-size очень похоже на свойства CSS. мин-высота и min-width , но свойство min-block-size зависит от направления блока.

Показать демо ❯

Значение по умолчанию:	авто
Унаследовано:	нет
Анимация:	да. Читать о анимированном Попробуй
Версия:	CSS3
Синтаксис JavaScript:	объект .style.minBlockSize=»10px» Попробуй

---

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
минимальный размер блока	57,0	79,0	41,0	12,1	44,0

---

---

Синтаксис CSS

min-block-size: auto| значение |начальное|наследовать;

Значения свойств

Значение	Описание	Демо
авто	По умолчанию. Значение минимального размера блока по умолчанию для элемента.	Демонстрация ❯
длина	Указывает минимальный размер блока в px, pt, cm и т. д. Подробнее о единицах длины	Демонстрация ❯
%	Указывает минимальный размер блока в процентах относительно размера родительского элемента на соответствующей оси.	Демонстрация ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать о инициал
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

---

Дополнительные примеры

Режим письма

Если для свойства режима письма элемента

задано значение vertical-rl, направление блока меняется с нижнего на боковое, и это влияет на то, как min-block-size работа со свойствами:

div {
  минимальный размер блока: 200 пикселей;
  режим письма: вертикальный-rl;
}

Попробуйте сами »

Минимальный размер блока и размер блока

Посмотрите, как один элемент

с размером блока 100 пикселей, а другой

с минимальным размером блока 100 пикселей , реагировать по-разному на изменение размера содержимого:

#div1 {
  min-block-size: 100px;
}
#div2 {
 размер блока: 100 пикселей;
}

Попробуйте сами »

---

Связанные страницы

Свойство CSS block-size: CSS свойство Block-size

CSS свойство max-block-size: CSS свойство Max-block-size

CSS свойство min-height: CSS свойство Min-height

CSS Свойство min-width: Свойство CSS Min-width

Свойство режима письма CSS: Свойство режима письма CSS

❮ Назад Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник по HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery 7 Ссылки

02 Top 9 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Свойство CSS max-block-size

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Установите максимальный размер элемента

равным 60 пикселям в направлении блока:

div {
  max-block-size: 60px;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

---

Определение и использование

Свойство max-block-size указывает максимальный размер элемента в направлении блока.

Если содержимое меньше максимального размера в направлении блока, значение свойства max-block-size не действует.

Если содержимое больше максимального размера в направлении блока, будет применено значение свойства max-block-size .

Примечание: Связанное свойство CSS режим записи определяет направление блока, и это влияет на результат max-block-size свойство. Для страниц на английском языке направление блока — вниз, а направление строки — слева направо.

УС Свойство max-block-size очень похоже на свойства CSS. максимальная высота и max-width , но свойство max-block-size зависит от направления блока.

Показать демо ❯

Значение по умолчанию:	авто
Унаследовано:	нет
Анимация:	да. Читать о анимированном Попробуй
Версия:	CSS3
Синтаксис JavaScript:	объект .style.maxBlockSize=»60px» Попробуй

---

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Недвижимость
максимальный размер блока	57,0	79,0	41,0	12,1	44,0

---

---

Синтаксис CSS

максимальный размер блока: авто| значение |начальное|наследовать;

Значения свойств

Значение	Описание	Демо
авто	По умолчанию. Значение максимального размера блока по умолчанию для элемента.	Демонстрация ❯
длина	Указывает максимальный размер блока в px, pt, cm и т. д. Подробнее о единицах длины	Демонстрация ❯
%	Указывает максимальный размер блока в процентах относительно размера родительского элемента на соответствующей оси.	Демонстрация ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

---

Дополнительные примеры

Режим письма

Если для свойства режима письма элемента

задано значение vertical-lr, направление блока изменяется с нижнего на боковое, и это влияет на то, как 0024 max-block-size свойство work:

div {
max-block-size: 60px;
  режим письма: vertical-lr;
}

Попробуйте сами »

Максимальный размер блока и размер блока

Посмотрите, как один элемент

с размером блока 100 пикселей, а другой

с максимальным размером блока 100 пикселей , реагировать по-разному на изменение размера содержимого:

#div1 {
  max-block-size: 100px;
}
#div2 {
 размер блока: 100 пикселей;
}

Попробуйте сами »

---

Связанные страницы

Свойство CSS block-size: CSS свойство Block-size

CSS свойство min-block-size: CSS свойство Min-block-size

CSS свойство max-height : Свойство CSS Max-height

Свойство CSS max-width: Свойство CSS Max-width

Свойство режима письма CSS: Свойство режима письма CSS

❮ Назад Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

902 02 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Использование медиа-запросов — CSS: каскадные таблицы стилей

Медиа-запросы позволяют применять стили CSS в зависимости от общего типа устройства (например, печать или экран) или других характеристик, таких как разрешение экрана или ширина области просмотра браузера. Медиа-запросы используются для следующего:

• Для условного применения стилей с помощью CSS @media и @import at-правила.
• Для таргетинга на определенные медиафайлы для