Embedded Files
Design Responsivo é uma técnica que utiliza HTML e CSS para adaptar automaticamente o layout de um site a diferentes tamanhos de tela, sem a necessidade de criar várias folhas de estilo. O layout se ajusta de forma fluida, oferecendo uma boa experiência visual em qualquer dispositivo, seja desktop, tablet ou smartphone.
Media Queries (Consultas de Mídia)
Media Queries (Consultas de Mídia)
Media queries são recursos do CSS3 que permitem aplicar estilos específicos com base em características do dispositivo, como largura da tela, orientação e tipo de mídia. Elas garantem que o site permaneça legível e funcional em diferentes resoluções, evitando quebras de layout.
Sintaxe básica CSS:
Sintaxe básica CSS:
@media tipo de mídia and (condição) {
/* Regras de CSS aqui */
}
Exemplos de tipos de mídia:
Exemplos de tipos de mídia:
all: todos os dispositivos
screen: telas (monitores, tablets, smartphones)
print: impressão
speech: leitores de tela
Exemplos de condições:
Exemplos de condições:
(max-width: 678px): largura máxima de 678px
(min-width: 679px): largura mínima de 679px
(orientation: portrait): orientação vertical
(aspect-ratio: 16/9): proporção da tela
Exemplo prático CSS:
Exemplo prático CSS:
.text {
font-size: 14px;
}
@media screen and (max-width: 678px) {
.text {
font-size: 16px;
}
}
Nesse exemplo, o tamanho da fonte será aumentado em dispositivos com largura de até 678px.
Breakpoints
Breakpoints
Breakpoints são pontos definidos em media queries que determinam quando o layout deve se adaptar. No exemplo acima, 678px é o breakpoint, ou seja, o ponto em que as regras de estilo mudam para se adequar a dispositivos menores.
ORIENTATION PORTRAIT E LANDSCAPE
A media feature (orientation: portrait) é usada dentro de uma media query para aplicar estilos CSS somente quando o dispositivo estiver na orientação vertical, ou seja, quando a altura da tela for maior que a largura — como é comum em celulares e tablets quando estão em pé.
portrait → modo retrato (vertical)
landscape → modo paisagem (horizontal)
Exemplo prático CSS:
Exemplo prático CSS:
@media (orientation: portrait) {
body {
background-color: lightblue;
}
}
Neste exemplo, o fundo do site ficará azul apenas quando o usuário estiver visualizando a página em modo retrato (vertical).
Quando é útil?
Quando é útil?
Para ajustar fontes ou espaçamentos em telas pequenas (celulares em pé)
Para reorganizar o layout quando o usuário gira o dispositivo
Para exibir ou ocultar elementos dependendo da orientação da tela
Já a media feature (orientation: landscape) é usada dentro de uma media query para aplicar estilos CSS somente quando o dispositivo estiver na orientação horizontal, ou seja, quando a largura da tela for maior que a altura, como é comum em computadores, notebooks e celulares ou tablets deitados.
Para criar as três barrinhas do Menu
HTML
<button id="menu">☰</button>
CSS
#menu{
font-size: 60px;
border: 0 solid;
color: rgb(2, 2, 31);
}
Google Sites
Report abuse