Skip to content
Código usado no Micro Workshop Online sobre Responsive Web Design
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
README.md
ex-media-queries.css
index.html
mediaqueries.html
mobile.css
style.css

README.md

Micro Workshop Online do Tableless

Assunto: Responsive Web Design

O vídeo do Workshop Online do Tableless pode ser visto aqui.

#Anotações do treinamento:

METATAG VIEWPORT:

  • Resolução é diferente de tamanho de tela.
  • Um iphone, com tela pequena, tem uma resolução bem grande.
  • Você não trabalha com resoluções, você trabalha com tamanhos de tela.
  • A Metatag Viewport, faz a resolução ficar do mesmo tamanho que a tela do aparelho. Ou quase isso.
  • Essa é a metatag padrão que uso nos meus projetos. [code] [/code]

Ref: Manipulando a Metatag Viewport

MEDIA QUERIES

  • Antes existiam as Media Types. As media types serviam para formatar a informação para outros tipos de media.
  • Uma media muito usada é a print, que formata o layout para quando o site for impresso.
  • O problema é que as media types não trabalham para vários tipos de dispositivos. O valor SCREEN é muito genérico.
  • Daí surgiram as media queries. As media queries formatam o layout para vários tipos de tamanho de tela, densidade de pixels, orientação e etc.
  • Em projetos Mobile First, você coloca a versão desktop dentro da media querei e a versão mobile fora dessa media querie.

Ref: Introdução sobre Media Queries

IMAGENS FLUIDAS

  • Não perca a cabeça com as imagens. Isto é, não fique louco tentando servir várias imagens para vários tipos de dispositivos.
  • Não há solução decente hoje. Usar scripts ou plugins que façam um trabalho obscuro por trás é ruim.
  • A tag picture é uma solução importante, mas ainda falta suporte e não pode ser usada.
  • Em um site responsivo as imagens precisa ser flexíveis. O truque simples é: img { max-width: 100%; }

GRIDS FLEXIVEIS

  • Grids são facilitadores. Eles te ajudam a prever o comportamento do layout.
  • Os grids podem ser totalmente flexíveis ou fluídos. Mostrar exemplo de grid fluído e fixo
  • Você pode usar frameworks para ajudar. Eu sugiro o grid do Bootstrap e em segundo lugar o Foundation.

FONTS em REM

  • Quando diminuimos a tela, precisamos diminuir as fonts. Usar fonts com tamanho relativo é prático.
  • Use REM hoje em dia. Se tiver que dar suporte para o IE 8, use EM.
  • A diferença de REM e EM é que o REM pega como referência o tamanho de font do root, nesse caso o HTML.
  • A conta para fazer a conversão de PX para REM/EM é simples: valor da font em pixels, dividido por 16 = valor em REM.
  • No HTML, recomenda-se usar 100% como font-size. Logo, no mobile você consegue diminuir para 90% 85% de maneira com que as fonts diminuam ou aumentem proporcionalmente.
You can’t perform that action at this time.