cefet_front_end

CSS parte 7

Responsive Web Design

A Web é multi-dispositivos

Computadores
Telefones/tablets
Videogames
Smart TVs
Smartwatches
VR headsets
Carros

O que varia entre dispositivos?

Tamanho da tela
Razão de aspecto (largura/altura)
Tipo de input (mouse/teclado, toque (multi), gestos)
Densidade de pixels da tela
Quantidade de cores
Conexão com a Internet

Diretrizes para a web multi-dispositivos

Independer de ampliação
- Usuário não deve precisar dar zoom para enxergar/interagir
Independer da razão de aspecto (larg/alt)
- Página deve se adequar para ficar longa ou achatada
Aproveitar todo o espaço disponível, não mais, não menos
- Não permitir barras de rolagem horizontais
Explorar da alta densidade de pixels
- Usar imagens com resolução suficiente ao dispositivo
Otimizar o desempenho
- A página não pode demorar para carregar

Na aula de hoje

A tag meta viewport
Media queries
Densidade de pixels
Responsive web design

A tag `meta` viewport

Como definir a janela da página

Carregando uma página no smartphone
Relembrando a tag <meta>
Definindo a janela de pintura (viewport)
Unidades de medida

Uma página carregada em um smartphone Android que reduziu o tamanho da página para caber na tela pequena do dispositivo. O texto da página ficou bem pequeno por causa da redução.

Do jeito errado (se não se não definirmos a viewport)

Uma página carregada em um smartphone Android com o tamanho do texto normal, sem a necessidade de o usuário ampliar a tela para ler.

Do jeito certo (viewport definida)

Carregando uma página no smartphone

O navegador, por padrão, assume que a página vai ocupar uns 1000px de largura, mesmo em dispositivos com telas menores
1. Navegador carrega a página
2. Navegador vê que ela ocupou mais que a largura do dispositivo
3. Navegador reduz (faz zoom out) na página
Precisar dar zoom-in/out é uma experiência de uso ruim!
Para evitar que o usuário precise ampliar/reduzir, podemos definir qual a largura da “janela de pintura” (viewport) da página
- Para tanto, vamos usar uma tag <meta>

Codificação Unicode e UTF-8

Unicode provê o suporte multilíngua
- Diversos alfabetos, não apenas o romano/latino
UTF-8 é uma codificação que usa uma sequência de 8 bits para armazenar códigos UNICODE
- Os 128 primeiros caracteres UTF-8 são idênticos aos ASCII
  - Ou seja, todo o alfabeto, pontuações mais comuns e números
```
...
<head>
  <meta charset="utf-8">  
  <title>...</title>
  ...
...
```
Em HTML, dentro do <head> da página, usamos uma <meta> tag com o atributo charset para isso ➡️
- Essa tag deve aparecer nos primeiros 1024 caracteres da página (entenda)
Para ASCII, seria <meta charset="ISO-8859-1"> (ASCII romano/latino)

Definindo a janela de pintura

Usamos <meta name="viewport" content="..."> para definir a largura da janela:
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
- width=device-width faz com que a “janela” do navegador tenha a largura igual à do dispositivo (não mais, não menos)
- initial-scale=1 faz com que a página não seja ampliada/reduzida inicialmente (mas ainda assim permitindo que o usuário o faça)
Devemos sempre usar a <meta name="viewport"> nos sites!
Referência: meta tag viewport na MDN

Unidades de medida

Além da viewport, também precisamos definir dimensões dos elementos de forma que caibam na janela
Técnicas:
1. Evitar larguras fixas maiores que a janela
  - ~~width: 900px~~ :arrow_right: width: 100%
2. Preferir unidades de medida relativas
  - ~~padding-top: 90px~~ :arrow_right: padding-top: 25%
Mas o que são unidades de medida relativas?

Unidades de medida relativas

Absolutas (fixas)
- px
- cm, mm, in, pt, pc
Relativas ao tamanho do container:
- %
Relativas ao tamanho da fonte:
- em (letra M)
- rem (letra M - root)
- ex (letra x)
- ch (número 0)
Relativas ao tamanho da janela:
- vh (1/100 altura)
- vw (1/100 largura)
- vmin (1/100 menor dim.)
- vmax (1/100 maior dim.)

Exemplos: `em` vs `rem`

em é o font-size do elemento atual
rem é o font-size do elemento <html> (root element)
- …que, por padrão, é 16px
Quando usar: para tamanhos, margens, padding, line-height etc.

Exemplo: `vh` e `vw`

1vw = 1/100 da largura da janela
1vh = 1/100 da altura da janela
Quando usar: para tamanhos de coisas que ocupam sempre a mesma proporção da janela (e.g., slides)

Media Queries

Regras CSS condicionais

O que são media queries
Anatomia de uma media query
Tipos de mídia
Características de mídia

O que são media queries

As media queries têm o propósito de possibilitar a delimitação do escopo de regras CSS para diferentes mídias
Exemplos:
1. Arquivo com regras CSS para impressão
```
<link rel="stylesheet" media="print" href="p-impressao.css">
```
2. Dentro de um arquivo CSS, regras diferentes para o tamanho de uma imagem se o dispositivo estiver orientado verticalmente (portrait) ou horizontalmente (landscape)
  - img.produto { width: 200px; }
  - @media screen and (orientation: portrait) { img.produto { width: 100%; } }

Anatomia de uma media query

Formada por:
1. Media types
2. Media features
3. Operadores

Tipos de Mídia

all ~ Qualquer dispositivo

print ~ Para documentos paginados ou exibidos em modo de visualização de impressão (aperte Ctrl+P)

screen ~ Dispositivos com telas (normalmente) coloridas

speech ~ Para sintetizadores de voz

Exemplo de uso de tipo de mídia: 2 formas

Arquivos separados:

<link rel="stylesheet" media="all" href="estilos-gerais.css">
<link rel="stylesheet" media="screen" href="para-monitores.css">
<link rel="stylesheet" media="print" href="para-impressao.css">

Dentro de um mesmo arquivo CSS:

body {
  background-color: #ccc;
}
   
   
@media print {
  body {
    background-color: transparent;
  }
}

Características de Mídia

width, height, max-width, max-height, min-width, min-height
- Largura e altura da janela do navegador
aspect-ratio
- Razão da largura pela altura da janela do navegador
orientation
- Orientação (landscape x portrait) do dispositivo
resolution
- Densidade de pixels do dispositivo
E mais…

Exemplo de uso de características de mídia (1/2)

Forma 1: Em arquivos separados

<!-- Arquivo de estilo para dispositivos pequenos -->
<link rel="..." media="screen and (max-width: 640px)" href="small-screens.css">

<!-- Arquivo de estilo para dispositivos grandes -->
<link rel="..." media="screen and (min-width: 641px)" href="large-screens.css">

Exemplo de uso de características de mídia (2/2)

Forma 2: Dentro de um mesmo arquivo (mais comum)

#logo {
  width: 200px;
}
/* com o "celular em pé"", a logo vai ocupar 100% */
@media screen and (orientation: portrait) {
  #logo {
    width: 100%;
  }
}

Densidade de pixels

Telas com “super definição”

A origem: iPad 3
Densidade de pixels
Como aproveitar

Retina display (da Apple)

Simulação de retina display

Para testar em um dispositivo de tela com alta densidade de pixels:

Este dispositivo tem densidade: x

Responsive Design

Adequando ao dispositivo

O que é
Exemplos de sites
Como fazer

O que é Responsive Design

Não significa desenho responsável =)
É a idéia de que as páginas Web devem se adaptar à plataforma que a está exibindo
- Melhorar a experiência de usuário
- Aproveitar características específicas de plataformas diferentes
Usa o recurso de media queries, mas também tamanhos fluidos, flexbox e grid

Exemplo de site responsive

Como fazer

Para criar uma página responsive, você deve
1. Usar unidades de medida relativas
2. Definir os pontos (largura) em que a página “quebra” (os breakpoints)
3. Criar regras de estilos diferentes para cada conjunto de dimensões
Por exemplo, vamos criar uma página que mostra
- 4 produtos por linha em dispositivos grandes
- 3 produtos por linha em dispositivos médios
- 2 produtos por linha em dispositivos pequenos

Exemplo

#produtos {  display: flex; }

@media (min-width: 801px) {
  /* tela grande: 4 produtos por linha */
  div.produto {  width: calc(100% / 4);  }
}

@media (min-width: 481px) and (max-width: 800px) {                 
  /* tela média: 3 produtos por linha */
  div.produto {  width: calc(100% / 3);  }
}

@media (max-width: 480px) {
  /* tela pequena: 2 produtos por linha */
  div.produto {  width: calc(100% / 2);  }
}

cefet_front_end

CSS parte 7

Responsive Web Design

A Web é multi-dispositivos

O que varia entre dispositivos?

Diretrizes para a web multi-dispositivos

Na aula de hoje

A tag meta viewport

Como definir a janela da página

Carregando uma página no smartphone

Codificação Unicode e UTF-8

Definindo a janela de pintura

Unidades de medida

Unidades de medida relativas

Exemplos: em vs rem

Exemplo: vh e vw

Media Queries

Regras CSS condicionais

O que são media queries

Anatomia de uma media query

Tipos de Mídia

Exemplo de uso de tipo de mídia: 2 formas

Características de Mídia

Exemplo de uso de características de mídia (1/2)

Exemplo de uso de características de mídia (2/2)

Densidade de pixels

Telas com “super definição”

Retina display (da Apple)

Retina display (da Apple)

Simulação de retina display

Responsive Design

Adequando ao dispositivo

O que é Responsive Design

Exemplo de site responsive

Como fazer

Exemplo

Exemplo vivo

A tag `meta` viewport

Exemplos: `em` vs `rem`

Exemplo: `vh` e `vw`