Чтобы использовать свойство max-width для создания адаптивного дизайна, максимальную ширину можно задать в процентах или единицах измерения видового экрана. 2 Например, max-width: 100%; или max-width: 80vw;. 2

Это обеспечит изменение размера элементов в соответствии с размером экрана. 2 Если свойству max-width присвоено значение 100%, изображение будет уменьшаться, если это необходимо, но никогда не будет увеличиваться до размера, превышающего его исходный размер. 3

Пример использования для изображений: img {max-width: 100%;}. 1 Максимальная ширина изображения будет равняться 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. 1

Обратите внимание, что свойство max-width не поддерживается в IE, поэтому в этом случае нужно использовать width: 100%. 1