Резиновая верстка
Принцип резиновой верстки заключается в том, что она сжимается и растягивается под изменением разрешения экрана. Задаются блокам относительные единицы измерения - %. Так как все построено на относительных единицах, то при изменении разрешения экрана эти единицы будут изменяться. Поэтому будут меняться и размеры блоков.
Но все же медиа-запросы применять стоит, так как текст все равно будет прежним, без изменений, к тому же при определенных разрешениях все равно придется поменять расположения блоков. Картинки тоже должны сжиматься и расширяться, сделать это можно очень просто, поставив у картинки display: block; и задав ширину в процентах, например width: 33.3% - то есть картинка будет всегда сжиматься и расширяться и занимать при любых разрешениях одну треть от ширины экрана.
Фиксированная верстка
При любых разрешениях экрана одно и тоже отображение контента(без изменений размеров блоков). То есть величины фиксированные, определенные(px). Если контент весь не влезает в экран, то появится полоса прокрутки.
Адаптивная верстка
Адаптивная верстка - верстка, которая отображается при различных разрешениях по-разному, так как применяются медиа-запросы, которые и определяют стили для конкретных разрешений экранов. Для одного и того же элемента определяются различные стили под разной шириной экрана так, чтобы он распологался удобно и чтобы не возникала горизонтальная полоса прокрутки экрана.
Также, если необходимо, то какие-нибудь блоки вообще можно убрать при верстке. Делается адаптив согласно дизайну, дизайнер должен предоставить макет при разных разрешениях, но иногда это не предоставляется и приходится менять, убирать и распологать блоки по-своему взгляду.
Существуют популярные разрешения экранов, под которые и делается адаптив, например в Bootstrap это - 1170px, 970px, 750px и меньше. Но также можно ставить и свои разрешения и адаптировать под них.
В консоли разработчика в Google есть полезный инструмент, который помогает посмотреть как будет выглядеть ваша верстка на определенных устройствах(смартфоны, ноутбуки, планшеты и компьютеры). Нужно правой кнопкой мыши нажать на сайт, затем выбрать опцию "Просмотреть код", у вас вылезет такое окно:
нужно нажать на этот элемент и у вас появится возможность выбирать устройство, на котором вы хотите посмотреть, как будет выглядеть ваша разметка на этом устройстве:
В данном случае вы видите как выглядит яндекс дзен на устройствах iPhone 6/7/8. Также видно и разрешения экрана, в данном случае это 375x667(375px по ширине и 667px по высоте).
Посмотреть предыдущую статью.
Подписывайтесь на канал, чтобы не пропустить следующие статьи, а также предлагайте свои темы на выбор в группе ВКонтакте в описании канала.