От автора: вы хотели бы ограничить ширину модального окна? Ну, чтобы всплывающее окно походило на модальное на больших экранах. Скажем, вам нужно 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
Источник: //css-tricks.com/
Редакция: Команда webformyself.