Современный веб — это мир, где один и тот же сайт открывают на ноутбуке, смартфоне, планшете и огромном 4K-мониторе. И если верстка ещё кое-как переживает такие эксперименты, то изображения без правильной настройки быстро превращаются в главную боль интерфейса. В этой статье разберёмся, что такое резиновые изображения, зачем они нужны, почему box-sizing не спасает, как правильно использовать calc() и чем принципиально отличаются контентные и фоновые изображения. Итак, поехали. Резиновыми называют изображения, размеры которых зависят от размеров родительского блока...

Для удобства чтения готового сайта на различных устройствах предусмотрена гибкая верстка, а не фиксированная, как было раньше. Компоненты «резиновой» конструкции приспосабливаются к тому или иному размеру экрана. Метод реализуется посредством разметки, задающейся в процентах. Так получается два варианта «резинового» макета, лишь один из которых выполнен в пикселях. Но в смартфоне картина будет выглядеть все-таки еще не очень хорошо. Для решения проблемы сайты делают на адаптивном типе макета, создающемся с помощью сетки...