2.6 KiB
| title | localeTitle |
|---|---|
| Responsive Web Design | 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:
- Escrever consultas de mídia
- Usando estruturas CSS pré-existentes
- Usando o modelo Flexbox
- Usando o CSS Grid
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 , Material Design Lite e Foundation 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.
<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.
