Просмотров: 3 667

Свойство CSS max-width. Создаем 1 колоночный макет мобильного шаблона.

88Для того, чтобы адаптировать сайт под мобильные устройства его блоки должны иметь резиновую ширину, которая изменяется в зависимости от размера экрана. Такая «резиновость» достигается за счет задания относительных единиц измерения, например процентов.

К примеру, имеем блок div с шириной 90% от ширины экрана.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<body>
<div style="background:#C30; width:90%; margin:auto; color:#fff;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque explicabo quis saepe consequatur quas officiis voluptas excepturi, id et mollitia ipsa eius dignissimos veritatis impedit possimus quo veniam placeat omnis!</p>
</div>
</body>
</html>

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

Например, если наш блок div будет содержать в себе текст, то при слишком сильном растягивании, этот текст может стать совершенно нечитаемым на больших мониторах. Читать очень длинную строку текста очень не приятно, правда?

Для того, чтобы ограничить пределы, до которых может растянуться блок с относительной шириной, используют свойство CSS max-width.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<body>
<div style="background:#C30; width:90%; margin:auto; color:#fff;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque explicabo quis saepe consequatur quas officiis voluptas excepturi, id et mollitia ipsa eius dignissimos veritatis impedit possimus quo veniam placeat omnis!</p>
</div>
<div style="background:#060; width:90%; margin:auto; color:#fff; max-width:900px;">
<p>Блок со свойством max-width:900px. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque explicabo quis saepe consequatur quas officiis voluptas excepturi, id et mollitia ipsa eius dignissimos veritatis impedit possimus quo veniam placeat omnis!</p>
</div>
</body>
</html>

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

Посмотрите на видео демонстрацию, как это происходит:

Нижний блок со свойством max-width останавливает свое растяжение после того, как он достигает ширины 900px.

Свойство max-width — это одно из тех свойств CSS, на которых основывается вся мобильная верстка.

Посмотрите пример кода, как можно с помощью свойства max-width создать простой одноколоночный макет сайта.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Шаблон одноколоночного макета страницы, адаптированного под мобильные устройства.</title>
<style>
 body{
 font-size: 16px;
 font-family: Candara, Trebuchet MS, Arial, Sans-serif;
 }
 .container{
 max-width: 900px;
 width: 90%;
 margin: 25px auto;
 background: #e3e3e3;
 padding: 15px;
 }
</style>
</head>
<body>
<div class="container">
 <h1>Шаблон одноколоночного макета страницы, адаптированного под мобильные устройства.</h1>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus!
 </p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum enim esse explicabo nihil, exercitationem illo itaque voluptatum rerum ducimus et facere aut, in tempora, error ipsa, aliquam provident doloribus!
 </p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque explicabo quis saepe consequatur quas officiis voluptas excepturi, id et mollitia ipsa eius dignissimos veritatis impedit possimus quo veniam placeat omnis!</p>
</div>
</body>
</html>

Безымянный

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