Skip to content

Latest commit

 

History

History

css7

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

CSS parte 7

Responsive Web Design

A Web é multi-dispositivos

  1. Computadores
  2. Telefones/tablets
  3. Videogames
  4. Smart TVs
  5. Smartwatches
  6. VR headsets
  7. Carros

[VR]: Virtual Reality

O que varia entre dispositivos?

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

Diretrizes para a web multi-dispositivos

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

Na aula de hoje

  1. A tag meta viewport
  2. Media queries
  3. Densidade de pixels
  4. Responsive web design
  5. A Super Loja 🏪

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

::: figure .viewport-on-device 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
definirmos a viewport) :::

::: figure .viewport-on-device 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">  <!-- USE ESTA META TAG -->
  <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 ➡️ width: 100%
    2. Preferir unidades de medida relativas
      • padding-top: 90px ➡️ 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.)

Exemplo: em vs rem

<iframe height='265' scrolling='no' title='Exemplo em vs rem' src='//codepen.io/fegemo/embed/JrvRgL/?height=300&theme-id=dark&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Exemplo em vs rem by Flavio (@fegemo) on CodePen. </iframe>
  • 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

<iframe height='326' scrolling='no' title='Exemplo vh e vw' src='//codepen.io/fegemo/embed/jGxVMV/?height=326&theme-id=dark&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Exemplo vh e vw by Flavio (@fegemo) on CodePen. </iframe>
  • 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

  1. 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">
  2. 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)

Retina display (da Apple)

Simulação de retina display

Desenho da estrela do jogo do Mario Desenho da estrela do jogo do Mario

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

Desenho da estrela do jogo do Mario Desenho da estrela do jogo do Mario

  • Este dispositivo tem densidade: x 🔢 window.devicePixelRatio

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);  }
}

Exemplo vivo

<iframe width="100%" height="450" src="//jsfiddle.net/fegemo/Lw7prv0u/6/embedded/result,css,html/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

A Super Loja 🏪

Lojinha responsável

  • Atividade de hoje