O que é design responsivo
Basicamente é um layout que se adapta ao tamanho da tela. Contrario a forma de desenvolver um site para cada tipo de dispositivo o Design Responsivo é o mesmo site, porem com regras CSS diferentes para PC, Celular, tablet entre outros. Este design pode ser feito em uma folha de estilo separada para cada dispositivo ou situações, deste modo é necessário definir qual seria usado ao carregar a página no elemento link do html, como também pode ser feito em apenas uma folha de estilo o que faria que essa decisão ocorresse dentro da folha de estilo.Criar um layout responsivo
Neste passo a passo iremos abordar uma das infinitas maneiras possíveis de se fazer um layout responsivo de uma páginas em 3 tamanhos diferente.
Mas antes de começar a desenvolver as marcações e a folha de estilo, precisamos ter o conteúdo da página definido ou uma idéia de qual será o tipo de conteúdo e desenvolver um wireframe, após um layout.
Como o objetivo é apenas mostrar o uso de Media Queries vamos a folha de estilo:
No do CSS (Folha de Estilo Cascata), podemos definir as condições para cada medida com o uso de Media Types, no caso deste objetivo usaremos a media type SCREEN 'Tela' e nas condições usaremos AND 'e'.
Exemplo de uma página HTML5 simples:
Folha de Estilo da Página HTML:
Resultado do @media screen and (min-width:1024px):
Resultdo do @media screen and (min-width:600px) and (max-width: 1023px):
Resultado do @media screen and (max-width:599px):
Podemos notar que conforme reduzimos a tela sua cor de fundo muda conforme suas medidas atuais.
