Web Design Responsivo

Introdução

Web Design Responsivo foi criado em 25/10/2010 por Ethan Marcotte e apresentado ao mundo em um artigo publicado em https://kwz.me/6B.

Antes de qualquer coisa, é necessário que fique muito claro que design responsivo não diz respeito simplesmente e somente à adaptação do layout ao tamanho da tela.

Vai muito além disso, pois o conceito de design responsivo na sua forma ampla deve ser entendido como o design capaz de "responder" às características do dispositivo ao qual é servido. Responder, nesse contexto, tem o sentido de movimentar-se expandindo e contraindo.

Ingredientes do RWD

São as três tecnologias fundamentais para desenvolvimento do design responsivo.

1. grid fluído;
2. imagens e mídia flexíveis;
3. media queries.

Grid Fluído

FlexBox

Trata-se de um modelo unidimensional de layout. A declaração CSS display: flex; habilita um container a honrar as propriedades CSS para o modelo flexbox. Observe um diagrama da propriedade flex-direction.

Grid layout

Trata-se de um modelo bidimensional de layout. A declaração CSS display: grid; ou display: inline-grid; habilita um container a honrar as propriedades CSS para o modelo CSS Grid Layout. Um grid layout tem o aspecto mostrado na figura a seguir: