54 lines
3.7 KiB
Markdown
54 lines
3.7 KiB
Markdown
|
---
|
|||
|
|
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` устанавливают ширину `<div>` зависимости от того, является ли экран маленьким или средним.
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div class="col-12 col-md-6"></div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Рамка Bootstrap делит строку на двенадцать столбцов. В приведенном выше примере `<div>` будет распространяться через девять или шесть из них. Система сетки, изображенная на рисунке ниже, является основополагающей для того, как Bootstrap упрощает гибкий дизайн.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Дополнительная информация:
|
|||
|
|
|
|||
|
|
1. [CSS Flexbox Полный учебник за 8 минут](https://medium.freecodecamp.org/css-flexbox-interactive-tutorial-in-8-minutes-including-cheat-sheet-6214e00de3d2)
|
|||
|
|
2. [Раздел Freecodecamp CSS](https://guide.freecodecamp.org/css) .
|
|||
|
|
3. [Учебник CSS Flexbox от CodingTutorials360](https://www.youtube.com/watch?v=zBjUEDzK-ow)
|