O Que É Design Responsivo?
Não é possível imaginar o desenvolvimento web moderno sem designs adaptativos/responsivos. Isso permite que os usuários acessem recursos web igualmente em qualquer dispositivo: smartphone, tablet, desktop ou TV.
Como funciona?
- A equipe de desenvolvimento define como cada elemento será exibido dependendo do tamanho da tela;
- Define as instruções necessárias no código;
- O navegador monitora as mudanças na viewport;
- O navegador aplica as regras que a equipe de desenvolvimento definiu no código.
Media-queries
Media-query é o que torna possíveis os designs adaptativos/responsivos. Com a ajuda dessas queries, desenvolvedores podem definir os estilos de qualquer elemento dependendo do tamanho da tela.
Nota
Podemos entender media-query como instruções: "Se a tela do usuário for um desktop, aplique tais estilos ao elemento. Se a tela do usuário for um smartphone, aplique outros estilos ao elemento. E assim por diante.".
A sintaxe básica da media-query é a seguinte:
@media <media_type> <operator> (<media_feature>) {
/* CSS rules */
}
<media_type>- declara o tipo de dispositivo. Valores possíveis:all- valor padrão. Se nada for especificado, a regra de mídia funciona para todos os dispositivos;print- a regra de mídia funciona para dispositivos que produzem documentos impressos, como impressoras;screen- a regra de mídia funciona para todos os dispositivos com tela física.
<media_feature>- declara as características do dispositivo. Uso mais comum:min-width:- largura mínima da viewport;max-width:- largura máxima da viewport.
<operator>- media-type e media-feature são separados pelo operador lógico opcional. Os valores podem ser:andou,.
Nota
Nos próximos capítulos, será considerado o uso de media-queries na prática.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you give an example of a media-query in CSS?
What are some common use cases for media-queries?
How do I choose between adaptive and responsive design?
Awesome!
Completion rate improved to 2.04O Que É Design Responsivo?
Deslize para mostrar o menu
Não é possível imaginar o desenvolvimento web moderno sem designs adaptativos/responsivos. Isso permite que os usuários acessem recursos web igualmente em qualquer dispositivo: smartphone, tablet, desktop ou TV.
Como funciona?
- A equipe de desenvolvimento define como cada elemento será exibido dependendo do tamanho da tela;
- Define as instruções necessárias no código;
- O navegador monitora as mudanças na viewport;
- O navegador aplica as regras que a equipe de desenvolvimento definiu no código.
Media-queries
Media-query é o que torna possíveis os designs adaptativos/responsivos. Com a ajuda dessas queries, desenvolvedores podem definir os estilos de qualquer elemento dependendo do tamanho da tela.
Nota
Podemos entender media-query como instruções: "Se a tela do usuário for um desktop, aplique tais estilos ao elemento. Se a tela do usuário for um smartphone, aplique outros estilos ao elemento. E assim por diante.".
A sintaxe básica da media-query é a seguinte:
@media <media_type> <operator> (<media_feature>) {
/* CSS rules */
}
<media_type>- declara o tipo de dispositivo. Valores possíveis:all- valor padrão. Se nada for especificado, a regra de mídia funciona para todos os dispositivos;print- a regra de mídia funciona para dispositivos que produzem documentos impressos, como impressoras;screen- a regra de mídia funciona para todos os dispositivos com tela física.
<media_feature>- declara as características do dispositivo. Uso mais comum:min-width:- largura mínima da viewport;max-width:- largura máxima da viewport.
<operator>- media-type e media-feature são separados pelo operador lógico opcional. Os valores podem ser:andou,.
Nota
Nos próximos capítulos, será considerado o uso de media-queries na prática.
Obrigado pelo seu feedback!
