Суть проблемы
У меня часто возникала ситуация, когда я, делая для сайта модальное окно, писал много-много медиа-запросов, в которых заменял такие свойства как min-width, max-width, width. Также я постоянно путался в том, какие выбрать единицы измерения: пиксели, проценты, а может быть вообще vw?
Поэтому решил написать небольшое пособие с двумя аналогичными способами.
Одна из моих любимых проблем, которую я постоянно решал, но изобретался велосипед:
Решение
Все достаточно просто: обычно вы хотите сделать модальное окно определенной длины, но чтобы оно не выезжало за края экрана при адаптиве. Для этого есть два способа, причем стоит отметить, что люди не могут принять тот факт, что эти записи полностью идентичны:
1) width: 600px; max-width: 100%;
2) width: 100%; max-width: 600px;
Обычно люди не принимают этот факт и пишут что-то вроде:
- Второй способ более правильный
- Огромная разница, очевидно
- Второй способ более адаптирован к ширине родителя
- Второй способ выглядит более логичным и однозначным
Я согласен, на первый взгляд они отличаются, поэтому просто сравните примеры по ссылке: https://codepen.io/chriscoyier/pen/pbaQvG?editors=1100
Всю суть обоих методов можно описать в одной фразе: если ширина родителя (для модального окна почти всегда это ширина страницы) больше ширины модального окна, то модальное окно будет иметь ширину N. Если ширина N больше ширины родителя, то она растянется на всю ширину родителя, но не превысит ее.
Надеюсь, это было просто и полезно! :)
