--- title: Responsive Web Design localeTitle: Отзывчивый веб-дизайн --- ## Отзывчивый веб-дизайн Отзывчивый веб-дизайн - это концепция проектирования веб-страниц, которые адаптируются к разным размерам экрана. Обычно это связано с использованием разных макетов, размеров шрифтов и размещения навигационных меню. Чтобы создать отзывчивую веб-страницу, CSS обычно используется для стилизации ваших HTML-элементов. Некоторые общие методы в CSS, используемые для создания адаптивных веб-дизайнов: 1. Запись [медиа-запросов](https://guide.freecodecamp.org/css/media-queries) 2. Использование ранее существующих [фреймворков CSS](https://guide.freecodecamp.org/css/css-frameworks) 3. Использование [модели Flexbox](https://guide.freecodecamp.org/css/layout/flexbox) 4. Использование [CSS-сетки](https://guide.freecodecamp.org/css/layout/grid-layout) ### 1\. Медиа-запросы Запросы в СМИ говорят веб-браузеру игнорировать или заменять свойства веб-страницы на основе определенных атрибутов, таких как ширина экрана или печать. ``` @media (query) { /* The browser will use the CSS rules within the curly braces when the query is true */ } ``` Следующий пример устанавливает `padding-left` и `padding-right` внутри класса `more-padding` когда ширина экрана меньше или равна 768px. ``` @media screen and (max-width: 768px) { .more-padding { padding-left: 10px; padding-right: 10px; } } ``` ### 2\. CSS-рамки В рамках CSS-фреймворков, таких как [Bootstrap](https://www.getbootstrap.com/) , [Material Design Lite](https://getmdl.io/) и [Foundation,](https://foundation.zurb.com/) есть встроенные классы CSS, которые упрощают адаптивное программирование. Эти классы работают как стандартные классы HTML. В этом примере `col-md-9` и `col-sm-6` устанавливают ширину `