Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. CSS
Webdesign

Guia Rápido dos Pontos de Parada Verticais

by
Difficulty:IntermediateLength:QuickLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Bem vindo a outro vídeo tutorial da Envato Tuts+! Nesse vídeo trazemos uma breve introdução aos pontos de parada verticais do CSS.

Pontos de parada são sinônimos de web design responsivo. Eles são os pontos que escolhemos para alterar o layout do design. Por exemplo, 768px é uma área de visualização muito usado, abaixo disso podemos ajustar para dispositivos móveis e acima disso podemos pensar em termos de desktop.

Contudo, pontos de parada não funcionam só na horizontal, para largura da área de visualização, elas também entram em ação em várias outras horas. Nesse tutorial, veremos os pontos de paradas verticais, que são aplicados em relação à altura das áreas de visualização. Usamo-nos com min-height e max-height nas consultas de mídia do CSS. Vejamos mais a fundo.

Nesse vídeo veremos os cenários a seguir:

  • Alterar espaçamento e tamanho de fontes em áreas pequenas
  • Ajustar tamanhos de navegação móvel em áreas pequenas
  • Tornar cabeçalho ou rodapé fixos apenas quando há espaço suficiente
  • Ajustar seções tela-cheia para áreas menores

Baixemos os arquivos fontes para seguir o tutorial.

Leitura Adicional

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.