Свойство CSS max-width
Свойство max-width задаёт наибольшую ширину, которую может иметь элемент. Элемент может быть уже этого значения, но никогда не шире.
Оно полезно для адаптивных макетов и для сохранения читаемости контента на экранах разного размера.
Проблема с width: Центрированный <div> с фиксированной шириной, например 600px, будет выходить за границы, когда окно браузера уже этой ширины, и браузер может добавить горизонтальную полосу прокрутки.
Использование max-width вместо этого: Задание max-width лучше справляется с узкими окнами, потому что элемент сжимается, чтобы уместиться, вместо того чтобы выходить за границы.
Пример
Один div использует фиксированную width, а другой — max-width, поэтому только второй сжимается в узком окне.
Prompt
HTML-страница, сравнивающая фиксированную ширину с max-width на двух центрированных div.
Во внутреннем блоке
<style> создайте div.ex1 с шириной 500px, margin auto и рамкой 3px solid зелёного цвета; и div.ex2 с max-width 500px, margin auto и такой же рамкой. Добавьте по div каждого класса с текстом. В узком окне div с фиксированной шириной выходит за границы, а div с max-width сжимается.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div has a width of 500px and margin set to auto.</div>
<br>
<div class="ex2">This div has a max-width of 500px and margin set to auto.</div>
<p>Resize the browser window to less than 500px wide to see the difference.</p>
</body>
</html>
Свойства CSS
Сводка свойств из этой главы:
max-width— задаёт максимальную ширину элемента.width— задаёт ширину элемента.