Consultas de Largura, Altura e Orientação
Direcione dimensões específicas da janela de visualização e orientações do dispositivo com recursos de mídia.
Consultas de Largura, Altura e Orientação é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Recurso de mídia width
O recurso width direciona-se à largura da janela de visualização. Use min-width e max-width para definir intervalos.
<div class="box">width feature demo</div>
Recurso de mídia height
O recurso height direciona-se à altura da janela de visualização. É útil para janelas de visualização baixas (como em telefones na horizontal), nas quais o espaço vertical é limitado.
<div class="hero">Hero (grows on tall viewports)</div>
Padrão para janelas de visualização baixas
Detecte janelas de visualização baixas e reduza preenchimentos e alturas que fariam o conteúdo transbordar:
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation: portrait e landscape
O recurso orientation detecta se a janela de visualização é mais alta (portrait) ou mais larga (landscape) do que na outra direção.
<div class="hero">Orientation-aware hero</div>
Proporção de pixels do dispositivo
Direcione-se a telas de alto DPI (Retina) com o recurso resolution ou com a opção não padrão, mas amplamente compatível, -webkit-device-pixel-ratio.
<div class="logo"></div>
Recurso aspect-ratio
Direcione-se a proporções específicas da janela de visualização. Isso é útil para centralizar o conteúdo de forma diferente em janelas de visualização 4:3 e 16:9.
<div class="video"></div>
Recurso hover
O recurso hover: hover detecta se o dispositivo de entrada principal é um ponteiro preciso capaz de passar sobre elementos. É útil para estilos específicos de dispositivos de toque.
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
Recurso pointer
pointer: fine representa um cursor preciso de mouse; pointer: coarse representa um dedo ou uma caneta. Isso é útil para ajustar o tamanho das áreas de toque.
<button>Tap target</button>
Combinando width e height
Crie regras específicas para telefones na horizontal combinando min-width com max-height:
<div class="nav">Nav bar</div>
Dimensões da janela de visualização e do dispositivo
As consultas de mídia CSS têm como alvo a janela de visualização (a janela do navegador), não as dimensões físicas da tela do dispositivo. Redimensionar a janela do navegador em um computador altera a largura da janela de visualização em tempo real.
Unidades da janela de visualização e consultas de mídia
Consultas de mídia e unidades da janela de visualização (vw, vh) respondem às mesmas dimensões da janela de visualização. Use consultas de mídia para mudanças de layout e unidades da janela de visualização para dimensionamento fluido dentro de um layout.
Verificação rápida
Qual recurso de mídia detecta se um dispositivo tem um ponteiro preciso capaz de passar sobre elementos?
Recapitulação
Os recursos de mídia incluem width, height, orientation, resolution, hover e pointer. Use-os para adaptar layouts às dimensões da janela de visualização e às capacidades do dispositivo. Os recursos hover e pointer ajudam a direcionar estilos para dispositivos de toque ou mouse, indo além do simples tamanho da tela.
Perguntas Frequentes
A aula “Consultas de Largura, Altura e Orientação” é grátis?
Sim — o texto completo de “Consultas de Largura, Altura e Orientação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Consultas de Largura, Altura e Orientação”?
Direcione dimensões específicas da janela de visualização e orientações do dispositivo com recursos de mídia. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Consultas de Largura, Altura e Orientação”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Sintaxe e Pontos de Interrupção Comuns
- Consultas de Largura, Altura e Orientação
- Prefers-Color-Scheme e Prefers-Reduced-Motion
- Combinando Várias Media Queries