max-width¶
Свойство max-width
устанавливает максимальную ширину элемента.
Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width
, max-width
и min-width
.
Если значение ширины (width
) больше значения max-width
, то ширина элемента принимается равной значению max-width
.
Блоки
- height
- width
- max-height
- max-width
- min-height
- min-width
Синтаксис¶
/* <length> value */
max-width: 3.5em;
/* <percentage> value */
max-width: 75%;
/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;
/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;
Значения¶
В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.
none
- Отменяет действие этого свойства.
Значение по-умолчанию:
max-width: none;
Применяется ко всем элементам, кроме строчных и таблиц
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Версия сайта для мобильных устройств</title>
<style media="only screen and (max-device-width:480px)">
body {
max-width: 480px; /* Максимальная ширина страницы в пикселях */
}
</style>
</head>
<body>
<h1>Текст заголовка</h1>
<p>Текст примера</p>
</body>
</html>