Os materiais didáticos aqui disponibilizados estão licenciados através de Creative Commons Atribuição-SemDerivações-SemDerivados CC BY-NC-ND. Você possui a permissão para visualizar e compartilhar, desde que atribua os créditos do autor. Não poderá alterá-los e nem utilizá-los para fins comerciais.
Atribuição-SemDerivações-SemDerivados
CC BY-NC-ND
Cursos / Informática para Internet / Desenvolvimento Front-end I / Aula
Nesta videoaula, você verá como controlar melhor o estilo que será aplicado a um elemento HTML, a depender da resolução de tela.
Você já deve ter percebido que muitos sites alteram estilos de menus laterais (comuns para exibição em navegadores de computador) para menus no topo, quando estão sendo exibidos em um dispositivo móvel. Esse é um exemplo de aplicação do "Media Queries".
Essa funcionalidade foi introduzida na versão 3 do CSS e facilitou a aplicação de estilos com base na resolução de tela disponível. Veja o exemplo abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Media Query</title>
<style>
body {
background-color: aquamarine;
}
@media only screen and (max-width: 600px) {
body {
background-color: rebeccapurple;
}
@media only screen and (min-width: 1200px) {
body {
background-color: red;
}
}
</style>
</head>
<body>
</body>
</html>No exemplo acima, a cor de fundo é alterada a depender da resolução da tela disponível. A cor "rebeccapurple" será exibida para resolução de até 600px, a cor "aquamarine" será utilizada quando não houver uma regra mais específica (Nesse caso, entre 600px e 1200px). A partir de 1200px, será utilizado o vermelho, pois satisfaz a condição "min-width: 1200px".
Diferentes condições podem ser utilizadas (orientação da tela, resolução etc). Além disso, é permitido o uso de múltiplas condições através de operadores lógicos. Para ver mais exemplos das possibilidades, consulte este link.
Versão 5.3 - Todos os Direitos reservados