0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<h2>Содержание</h2>
1
<h2>Содержание</h2>
2
<ul><li><a>Суть проблемы</a></li>
2
<ul><li><a>Суть проблемы</a></li>
3
<li><a>Решение</a></li>
3
<li><a>Решение</a></li>
4
</ul><h2>Суть проблемы</h2>
4
</ul><h2>Суть проблемы</h2>
5
<p>У меня часто возникала ситуация, когда я, делая для сайта модальное окно, писал много-много медиа-запросов, в которых заменял такие свойства как min-width, max-width, width. Также я постоянно путался в том, какие выбрать единицы измерения: пиксели, проценты, а может быть вообще vw?</p>
5
<p>У меня часто возникала ситуация, когда я, делая для сайта модальное окно, писал много-много медиа-запросов, в которых заменял такие свойства как min-width, max-width, width. Также я постоянно путался в том, какие выбрать единицы измерения: пиксели, проценты, а может быть вообще vw?</p>
6
<p>Поэтому решил написать небольшое пособие с двумя аналогичными способами.</p>
6
<p>Поэтому решил написать небольшое пособие с двумя аналогичными способами.</p>
7
<p>Одна из моих любимых проблем, которую я постоянно решал, но изобретался велосипед</p>
7
<p>Одна из моих любимых проблем, которую я постоянно решал, но изобретался велосипед</p>
8
<h2>Решение</h2>
8
<h2>Решение</h2>
9
<p>Все достаточно просто: обычно вы хотите сделать модальное окно определенной длины, но чтобы оно не выезжало за края экрана при адаптиве. Для этого есть два способа, причем стоит отметить, что люди не могут принять тот факт, что эти записи полностью идентичны:</p>
9
<p>Все достаточно просто: обычно вы хотите сделать модальное окно определенной длины, но чтобы оно не выезжало за края экрана при адаптиве. Для этого есть два способа, причем стоит отметить, что люди не могут принять тот факт, что эти записи полностью идентичны:</p>
10
<ol><li>width: 600px; max-width: 100%;</li>
10
<ol><li>width: 600px; max-width: 100%;</li>
11
<li>width: 100%; max-width: 600px;</li>
11
<li>width: 100%; max-width: 600px;</li>
12
</ol><p>Обычно люди не принимают этот факт и пишут что-то вроде:</p>
12
</ol><p>Обычно люди не принимают этот факт и пишут что-то вроде:</p>
13
<ul><li>Второй способ более правильный</li>
13
<ul><li>Второй способ более правильный</li>
14
<li>Огромная разница, очевидно</li>
14
<li>Огромная разница, очевидно</li>
15
<li>Второй способ более адаптирован к ширине родителя</li>
15
<li>Второй способ более адаптирован к ширине родителя</li>
16
<li>Второй способ выглядит более логичным и однозначным</li>
16
<li>Второй способ выглядит более логичным и однозначным</li>
17
</ul><p>Я согласен, на первый взгляд они отличаются, поэтому просто сравните примеры по ссылке:<a>https://codepen.io/chriscoyier/pen/pbaQvG?editors=1100</a></p>
17
</ul><p>Я согласен, на первый взгляд они отличаются, поэтому просто сравните примеры по ссылке:<a>https://codepen.io/chriscoyier/pen/pbaQvG?editors=1100</a></p>
18
<p>Всю суть обоих методов можно описать в одной фразе:<em>если ширина родителя (для модального окна почти всегда это ширина страницы) больше ширины модального окна, то модальное окно будет иметь ширину N. Если ширина N больше ширины родителя, то она растянется на всю ширину родителя, но не превысит ее.</em></p>
18
<p>Всю суть обоих методов можно описать в одной фразе:<em>если ширина родителя (для модального окна почти всегда это ширина страницы) больше ширины модального окна, то модальное окно будет иметь ширину N. Если ширина N больше ширины родителя, то она растянется на всю ширину родителя, но не превысит ее.</em></p>
19
<p>Надеюсь, это было просто и полезно! :)</p>
19
<p>Надеюсь, это было просто и полезно! :)</p>
20
<p>Александр Ковалец</p>
20
<p>Александр Ковалец</p>
21
<p>5 лет назад</p>
21
<p>5 лет назад</p>