Quiz 14 - Introdução
1. O que caracteriza um Web Design Responsivo?
Um site que carrega apenas em computadores caros
Um site que adapta seu layout e conteúdo automaticamente ao tamanho da tela do dispositivo
Um site feito exclusivamente para celulares
Um site que muda de cor a cada segundo
*Explicação: A responsividade garante que o site seja funcional e legível em qualquer resolução.*
2. Qual a função da meta tag `viewport` no HTML?
Aumentar a velocidade da internet
Instruir o navegador a ajustar a largura e a escala do site de acordo com a tela do aparelho
Inserir vídeos em segundo plano
Traduzir o site para outros idiomas
*Explicação: Sem essa tag, os navegadores de celular tentam "espremer" o site de desktop na tela pequena.*
3. No CSS, o que usamos para aplicar estilos baseados no tamanho da tela ou tipo de mídia?
`@action`
`@media` (Media Queries)
`@screen`
`@import`
*Explicação: As Media Queries permitem criar regras condicionais para diferentes dispositivos.*
4. Qual valor de `min-width` é comumente associado ao início do layout para Tablets?
320px
768px
1920px
100px
*Explicação: 768px é o ponto de quebra (breakpoint) padrão para tablets na maioria dos frameworks.*
5. O que significa a estratégia "Mobile-First"?
Criar o site no celular usando os dedos
Proibir o acesso de computadores ao site
Desenvolver o design e o código CSS primeiro para telas pequenas e depois adaptar para telas maiores
Fazer propagandas primeiro para usuários de celular
*Explicação: Mobile-First prioriza a simplicidade e a performance para dispositivos móveis.*
6. Qual a principal vantagem do Mobile-First em termos de performance?
O celular gasta menos bateria
Dispositivos menores carregam apenas o código essencial, tornando o site mais rápido
O Google cobra menos para hospedar o site
Não há vantagem técnica
*Explicação: Ao começar pelo simples, evitamos carregar estilos pesados desnecessários em conexões móveis.*
7. Como o navegador interpreta `@media (max-width: 600px)`?
Aplica os estilos apenas se a tela for maior que 600px
Aplica os estilos apenas se a tela tiver no máximo 600px de largura
Muda a fonte para o tamanho 600
Reinicia o site quando atinge 600px
*Explicação: `max-width` define um limite superior para a aplicação da regra.*
8. O que é um "Breakpoint" (Ponto de Quebra)?
Um erro que faz o site parar de funcionar
O valor de largura específico onde o layout do site se altera para melhor se adaptar
O momento em que o servidor cai
O final da página
*Explicação: Definimos breakpoints para que o design "quebre" de uma forma organizada entre celular, tablet e desktop.*
9. Qual ferramenta do navegador ajuda a testar a responsividade durante o desenvolvimento?
O Histórico de navegação
O Gerenciador de downloads
O "Device Mode" (Modo de Dispositivo) nas Ferramentas de Desenvolvedor (F12)
O botão de Favoritos
*Explicação: O modo de dispositivo permite simular resoluções de diversos celulares e tablets.*
10. Se um site responsivo usa `display: flex;` em um menu, o que geralmente acontece ao mudar de Desktop para Mobile?
O menu é deletado
A `flex-direction` muda de `row` (linha) para `column` (coluna) para empilhar os itens
O texto fica invisível
O site trava
*Explicação: Empilhar elementos verticalmente é a forma mais comum de adaptar menus em telas estreitas.*