Отзивчивият уеб дизайн прави уеб страницата ви приятна за всички устройства (настолни компютри, таблети и телефони). Отзивчивият уеб дизайн е свързан с използването на HTML и CSS за преоразмеряване, скриване, свиване, увеличаване или преместване на съдържанието, за да изглежда добре на всеки екран:

Настройване на изгледа

Когато правите responsive уеб страници, добавете следния елемент във всичките си уеб страници:

Това ще зададе изгледа на страницата ви, което ще даде на браузъра указания как да управлявате размерите и мащаба на страницата. Ето един пример за уеб страница без meta маркера на изгледа и една и съща уеб страница с meta маркера на изгледа:

Without the viewport meta tag:

With the viewport meta tag:

Responsive изображения

Отзивчивите изображения са такива, които се оразмеряват така добре, че да се поберат във всеки размер на прозореца на браузъра. Ако характеристиката за ширина е зададена на 100%, изображението ще реагира и ще се мащабира нагоре и надолу:

Забележете, че в горния пример изображението може да бъде мащабирано, за да бъде по-голямо от първоначалния си размер. По-добро решение в много от случаите би било да използвате вместо това, свойството за максимална ширина.

Различни изображения спрямо ширината на браузъра

HTML елементът <picture> ви позволява да дефинирате различни изображения за различните размери на прозорците на браузъра. Преоразмерете прозореца на браузъра, за да видите как се променя изображението по-долу в зависимост от ширината:

Размер на текста

Размерът на текста може да се зададе с мерната единица vw, което означава ширина на изгледа – viewport width. По този начин размерът на текста ще следва размера на прозореца на браузъра:

Media Queries

В допълнение към преоразмеряването на текста и изображенията е обичайно и използването на мултимедийни заявки в такъв тип уеб страници. С мултимедийни заявки можете да дефинирате напълно различни стилове за различни размери на браузъра. Пример: преоразмеряване на прозореца на браузъра, за да видите, че трите елемента div ще се показват хоризонтално на големи екрани и се подреждат вертикално на малки екрани: