Свойства min-width и max-width влияют на адаптивный дизайн следующим образом:
- min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определённые стили. 3 Если какое-нибудь значение будет ниже min-width, то стили будут проигнорированы. 3 Когда пользователь открывает сайт на устройстве, ширина которого начинается от min-width, вёрстка перестраивается, блоки размещаются соответственно подходящему дизайну. 4
- max-width задает максимальную ширину, при которой будут применяться определённые стили. 3 Если какое-нибудь значение будет больше max-width, то стили будут проигнорированы. 3
Сочетая значения max-width и min-width, можно задавать CSS-свойства, которые будут работать только в пределах определённой ширины экрана. 2 Например, с 800px до 1000px. 2
Также с помощью свойства max-width можно сделать медиа-контент масштабируемым: если установить значение 100%, то при уменьшении области просмотра любой медиа-контент будет уменьшаться в соответствии с шириной контейнеров. 1