Повесть о свойствах width и max-width

Повесть о свойствах width и max-width

От автора: вы хотели бы ограничить ширину модального окна? Ну, чтобы всплывающее окно походило на модальное на больших экранах. Скажем, вам нужно 600px. Нужно сделать так, чтобы это окно не вылезло за пределы родительского элемента. К примеру, чтобы не появлялась полоса горизонтальной прокрутки на мобильных устройствах.

Как это можно сделать?

width: 600px; max-width: 100%;

width: 100%; max-width: 600px;

Ответ: не важно, результат одинаковый. Некоторые скажут:

второй вариант более правильный;

на самом деле, разница велика;

второй вариант лучше подходит для родительских блоков небольшой ширины;

первый вариант отстой;

второй вариант более логически описывает поведение окна.

Соглашусь, слегка заумно. Вроде бы подходы разные. Всегда лучше протестировать демо на уменьшение окна.

Об этой проблеме удобно думать в таком плане: если элемент отрисовывается шире, чем предписано в свойстве max-width, то свойство выиграло. Сценарии:

Родительский блок в ширину 1000px

Судя по ширине, элемент должен быть 600px, что не нарушает правила max-width. То есть мы и получим 600px!

Судя по ширине, элемент должен быть 1000px, что нарушает правило max-width. В таком случае уменьшаем ширину окна до 600px.

Родительский блок в ширину 320px

По ширине элемент должен быть 600px. Это нарушает правило max-width, по которому элемент не может быть шире 320px. В итоге получаем наши 320px!

По ширине элемент должен быть 320px. Это не нарушает правило.

Какой бы ширины не был родительский элемент, этот набор правил удовлетворяет всем условиям. Майкл Лоутон говорит, что, есть небольшие отличия в тех случаях, когда окно является флекс элементом.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree