Все статьи | Блог студента

Как правильно адаптировать модальное окно

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Как правильно адаптировать модальное окно главное изображение

Суть проблемы


У меня часто возникала ситуация, когда я, делая для сайта модальное окно, писал много-много медиа-запросов, в которых заменял такие свойства как min-width, max-width, width. Также я постоянно путался в том, какие выбрать единицы измерения: пиксели, проценты, а может быть вообще vw?

Поэтому решил написать небольшое пособие с двумя аналогичными способами.

Одна из моих любимых проблем, которую я постоянно решал, но изобретался велосипед:

enter image description here

Решение


Все достаточно просто: обычно вы хотите сделать модальное окно определенной длины, но чтобы оно не выезжало за края экрана при адаптиве. Для этого есть два способа, причем стоит отметить, что люди не могут принять тот факт, что эти записи полностью идентичны:

1) width: 600px; max-width: 100%;
2) width: 100%; max-width: 600px;

Обычно люди не принимают этот факт и пишут что-то вроде:

  • Второй способ более правильный
  • Огромная разница, очевидно
  • Второй способ более адаптирован к ширине родителя
  • Второй способ выглядит более логичным и однозначным

Я согласен, на первый взгляд они отличаются, поэтому просто сравните примеры по ссылке: https://codepen.io/chriscoyier/pen/pbaQvG?editors=1100

Всю суть обоих методов можно описать в одной фразе: если ширина родителя (для модального окна почти всегда это ширина страницы) больше ширины модального окна, то модальное окно будет иметь ширину N. Если ширина N больше ширины родителя, то она растянется на всю ширину родителя, но не превысит ее.

Надеюсь, это было просто и полезно! :)

Аватар пользователя Александр Ковалец
Александр Ковалец 09 февраля 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
8 декабря 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
8 декабря 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
8 декабря 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
8 декабря 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
8 декабря 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Новый
Создает веб-приложения со скоростью света
8 декабря 5 месяцев