Fernando Porazzi

Desenvolvedor web

Responsive web design

Responsive o que?

O que é?

Design Responsivo é um conceito de estruturação de HTML e CSS para deixar o site adaptável às mais diversas resoluções de tela.

Início

Ethan Marcotte criou esse conceito em 2010 e publicou um artigo no blog A list apart

Um mundo fragmentado

Em julho de 2013 existiam 11.868 tipos distintos de smartphones rodando Android.

Porque usar?

Número de usuários de smartphones em constante crescimento.
Usabilidade
Conversões de usuários

CSS3 Media Queries

Ahn??

Media Queries são expressões usadas para detectar a resolução do dispositivo que está acessando a aplicação.

Ainda não entendi =(

Media Queries detectam o tamanho da tela do usuário e aplicam o CSS conforme necessário.

Tá, mas como eu uso isso?

Você vai precisar de:

Editor de código
Browser

Como começar?

Nem todos navegadores são iguais

Navegadores renderizam o CSS de maneiras distintas. Uma boa prática é usar "resets" que removem estilos pré-definidos dos navegadores.

							<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/grid.css">

Viewport tag

Adicione essa tag no cabeçalho do html, assim habilitamos o uso de media queries.

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS box Model

Descreve como os elementos são gerados e se comportam no navegador. Esse conceito consiste em 4 diferentes partes:

Content

Padding

BOrders

Margins

Box-sizing: border-box

						
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Tá, mas e as Media Queries?

Larguras de telas recomendadas:

320px
480px
568px
769px
1024px
1200px

							
@media screen and (min-width: 320px) and (max-width: 480px) { 
	// code here  
}

@media screen and (min-width: 480px) and (max-width: 568px) { 
	// code here  
}

@media screen and (min-width: 568px) and (max-width: 768px) { 
	// code here  
}

@media screen and (min-width: 768px) and (max-width: 1024px) { 
	// code here  
}

@media screen and (min-width: 1024px) and (max-width: 1200px){ 
	// code here  
}

@media screen and (min-width: 1200px){ 
	// code here  
}

Media Queries e Javascript

window.matchMedia()

							
var mq = window.matchMedia('@media all and (max-width: 700px)');

if (mq.matches) {
	// largura maior que 700px
} else {
	// largura menor que 700px
}

mq.addEventListener()

							
mq.addEventListener(function(changed){
if (changed.matches) {
	// largura maior que 700px
} else {
	// largura menor que 700px
}
});

Fernando Porazzi – Desenvolvedor web – Responsive o que?