max-width

Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Ширина элемента
Значения свойств Ширина
min-width < width < max-width width
    width < max-width width
    width > max-width max-width
min-width > width > max-width min-width
min-width > width < max-width min-width

Данные из таблицы следует понимать следующим образом. Если значение ширины (width) больше значения max-width, то ширина элемента принимается равной значению max-width.

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

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам, кроме строчных и таблиц
Анимируется Да

Синтаксис

max-width: <размер> | <проценты> | none

Значения

В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.

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>

В данном примере ширина страницы ограничена размером 480 пикселей для всех наладонных устройств. К ним относятся КПК, смартфоны и другие устройства, способные отображать HTML-документы.

Объектная модель

Объект.style.maxWidth

Спецификация

                                                                   
СпецификацияСтатус
CSS Intrinsic & Extrinsic Sizing Module Level 3Рабочий проект
CSS Level 2 Revision 1 (CSS 2.1)Рекомендация

Браузеры