2.6 KiB
title, localeTitle
| 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 media query
- Usando estruturas CSS pré-existentes
- Usando o modelo Flexbox
- Usando o CSS Grid
1. Consultas de mídia
Media queries informam ao navegador Web para ignorar ou substituir propriedades da página Web com base em atributos específicos, como largura da tela ou se o usuário está imprimindo.
@media (query) {
/* O navegador vai utilizar as regras CSS entre chaves, sempre que a query for verdadeira */
}
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
Frameworks 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, a <div> se espalhará em nove ou seis delas. O sistema de grade, mostrado abaixo, é fundamental para compreender como o Bootstrap facilita o design responsivo.
