54 lines
2.6 KiB
Markdown
54 lines
2.6 KiB
Markdown
|
---
|
|||
|
|
title: Responsive Web Design
|
|||
|
|
localeTitle: Web design responsivo
|
|||
|
|
---
|
|||
|
|
## Web design responsivo
|
|||
|
|
|
|||
|
|
Web design responsivo é o conceito de criação de páginas da Web que se adaptam a diferentes tamanhos de tela. Geralmente envolve o uso de diferentes layouts, tamanhos de fonte e colocação de menus de navegação.
|
|||
|
|
|
|||
|
|
Para criar uma página da Web responsiva, o CSS é comumente usado para estilizar seus elementos HTML. Alguns métodos comuns em CSS usados para criar projetos da Web responsivos são:
|
|||
|
|
|
|||
|
|
1. Escrever [consultas de mídia](https://guide.freecodecamp.org/css/media-queries)
|
|||
|
|
2. Usando [estruturas CSS](https://guide.freecodecamp.org/css/css-frameworks) pré-existentes
|
|||
|
|
3. Usando o [modelo Flexbox](https://guide.freecodecamp.org/css/layout/flexbox)
|
|||
|
|
4. Usando o [CSS Grid](https://guide.freecodecamp.org/css/layout/grid-layout)
|
|||
|
|
|
|||
|
|
### 1\. Consultas de mídia
|
|||
|
|
|
|||
|
|
Consultas de mídia informam ao navegador da Web para ignorar ou substituir propriedades da página da Web com base em atributos específicos, como largura da tela ou se o usuário está imprimindo.
|
|||
|
|
```
|
|||
|
|
@media (query) {
|
|||
|
|
/* The browser will use the CSS rules within the curly braces when the query is true */
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
O exemplo a seguir define `padding-left` e `padding-right` dentro da classe `more-padding` quando a largura da tela é menor ou igual a 768px.
|
|||
|
|
```
|
|||
|
|
@media screen and (max-width: 768px) {
|
|||
|
|
.more-padding {
|
|||
|
|
padding-left: 10px;
|
|||
|
|
padding-right: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2\. Frameworks CSS
|
|||
|
|
|
|||
|
|
Estruturas CSS como [Bootstrap](https://www.getbootstrap.com/) , [Material Design Lite](https://getmdl.io/) e [Foundation](https://foundation.zurb.com/) têm classes CSS pré-construídas que simplificam a codificação de projetos responsivos. Essas classes operam como classes HTML padrão.
|
|||
|
|
|
|||
|
|
Neste exemplo, `col-md-9` e `col-sm-6` definem a largura da tag `<div>` base em se a tela é pequena ou média.
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div class="col-12 col-md-6"></div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
O framework Bootstrap divide uma linha em doze colunas. No exemplo acima, o `<div>` se espalhará em nove ou seis deles. O sistema de grade, mostrado abaixo, é fundamental para como o Bootstrap facilita o design responsivo.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Mais Informações:
|
|||
|
|
|
|||
|
|
1. [Tutorial do CSS Flexbox Complete em 8 minutos](https://medium.freecodecamp.org/css-flexbox-interactive-tutorial-in-8-minutes-including-cheat-sheet-6214e00de3d2)
|
|||
|
|
2. [Seção CSS Freecodecamp](https://guide.freecodecamp.org/css) .
|
|||
|
|
3. [Tutorial de CSS Flexbox por CodingTutorials360](https://www.youtube.com/watch?v=zBjUEDzK-ow)
|