Nesta aula vamos aprender sobre como utilizar o Media Queries.
O HTML foi criado para ser portável, ou seja, ele deve ser lido e interpretado por qualquer tipo de dispositivo.
Cada dispositivo exibe HTML de uma determinada maneira. Logo, a forma com que você formata o layout precisa
ser diferente para cada dispositivo. Por exemplo, se você visita um site por um desktop, a experiência será
totalmente diferente caso você visite o mesmo site por um dispositivo móvel. São dispositivos diferentes, com
formas totalmente diferentes de navegação e uso.
12. Media Queries.
As Media Queries definem condições para que o CSS seja utilizado em cenários específicos.
Sintaxe:
Media queries consistem de um media type e podem, a partir de uma especificação CSS3, contendo uma ou
mais expressões, expressa em media features, que determinam ou verdadeiro ou falso. Os resultados da query são
verdadeiros se o media type especificado na media query corresponde ao tipo do documento exibido no dispositivo
e todas as expressões na media query são verdadeiras.
<!-- CSS media query dentro de um stylesheet -->
<style>
@media (max-width: 600px) {
.div{display: none;}
</style>
Quando uma media query é verdadeira, a camada de estilo ou as regras de estilos correspondentes são
aplicadas, seguindo o padrão de regras de cascatas.
1
12.1. Exercícios de Conteúdo
Olá, seja bem-vindo a nossa área de exercícios. Desenvolvemos uma série de atividades para que você domine
todo conteúdo abordado nesta aula, por isso é muito importante você fazer todos os exercícios e, qualquer dúvida,
chame o seu instrutor.
Observação: Salve os exercícios. Se você precisar de orientação de como localizar sua pasta, converse com seu
instrutor para que ele lhe ajude a criar uma ou oriente a encontrá-la.
Exercício 1:
Este exercício tem como objetivo trocar a cor do layout quando a tela for menor que 800 pixels.
1)Acesse o campo de busca do Windows e digite Notepad++
2)Na lista clique no aplicativo Notepad++
3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.
4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.
5)Pronto, agora digite o código abaixo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Exercício 1</title>
<style>
*{margin:0; padding:0; font-family:arial;}
header{width:100%; height:80px; background:#000000; color:white; line-height:80px; }
nav{width:100%; height:40px; background:#339933; color:white; line-height:40px;}
section{width:100%; height:500px; background:#DDD; }
@media (max-width: 800px){
header{background:#003333;}
nav{background:#99CCCC;}
section{background:#FFFFCC;}
</style>
</head>
<body>
2
<header>
<h1>Título da página</h1>
</header>
<nav>
<h3>Menu de navegação</h3>
</nav>
<section>
<h4>Conteúdo da página</h4>
</section>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio1.
8) Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.
Exercício 2:
Este exercício tem como objetivo criar um espaço para o logo no lado esquerdo e para o menu de navegação à
direita. Caso o navegador seja reduzido abaixo de 800 pixels, o logo será centralizado e o menu de navegação. Além
de centralizado, cada link vai ficar em uma linha.
1)Acesse o campo de busca do Windows e digite Notepad++
2)Na lista clique no aplicativo Notepad++
3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.
4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.
5)Pronto, agora digite o código abaixo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Exercício 2</title>
<style>
*{margin:0; padding:0; font-family:arial; list-style:none; text-decoration:none;}
3
h1{color:white; font:normal 32px arial; float:left; line-height:100px;}
#headerprincipal{width:100%; height:100px; background:#333;}
#navprincipal{float:right;}
#navprincipal a{color:white; margin:0 5px; line-height:100px;}
@media (max-width: 800px){
h1{width:100%; text-align:center;}
#headerprincipal, #navprincipal{width:100%; }
#headerprincipal, #navprincipal a {width:100%; display:block; color:black; text-align:center; line-
height:30px;}
}
</style>
</head>
<body>
<header id="headerprincipal">
<h1>Logotipo</h1>
<nav id="navprincipal">
<a href="#">HOME</a>
<a href="#">EMPRESA</a>
<a href="#">PRODUTOS</a>
<a href="#">CONTATO</a>
</nav>
</header>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio2.
8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.
Exercício 3:
Este exercício tem como objetivo criar três áreas quando a tela do navegador chegar a 800 pixels duas colunas
desaparecem.
1)Acesse o campo de busca do Windows e digite Notepad++
4
2)Na lista clique no aplicativo Notepad++
3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.
4)Clique no menu Linguagem e, em seguida, na letra “H” . Por fim, na opção HTML.
5)Pronto, agora digite o código abaixo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Exercício 3</title>
<style>
*{margin:0; padding:0; font-family:arial;}
#informativo1{width:10%; height:600px; background:#996666; float:left;}
#layout{width:80%; height:600px; background:#FF9966; float:left;}
#informativo2{width:10%; height:600px; background:#996666; float:left;}
#footer{width:100%; height:100px; background:#E7B8B8; float:left;}
@media (max-width: 800px){
#informativo1{display:none;}
#layout{width:100%;}
#informativo2{display:none;}
</style>
</head>
<body>
<div id="informativo1">
</div>
<div id="layout">
</div>
<div id="informativo2">
</div>
<div id="footer">
</div>
</body>
</html>
5
6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio1.
8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.
Exercício 4:
Este exercício tem como objetivo ajustar o conteúdo do site à esquerda, no modo padrão de visualização do
site, e ajustar à direita com bordas quando chegar em 800 pixels.
1)Acesse o campo de busca do Windows e digite Notepad++
2)Na lista clique no aplicativo Notepad++
3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.
4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.
5)Pronto, agora digite o código abaixo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Exercício 4</title>
<style>
*{margin:0; padding:0; font-family:arial;}
#area1{width:300px; float:left;}
@media (max-width: 800px){
#area1{float:right; width:400px;}
img{border:2px solid black; border-radius:10px 0 10px 0;}
</style>
</head>
<body>
<div id="area1">
<p>
6
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo
a ser o texto padrão usado por estas indústrias, desde o ano de 1500, quando uma misturou os caracteres de um
texto para criar um espécime de livro.
</p>
<img src="imagens/carro1.png"/>
</div>
<div id="area1">
<p>
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo
a ser o texto padrão usado por estas indústrias, desde o ano de 1500, quando uma misturou os caracteres de um
texto para criar um espécime de livro.
</p>
<img src="imagens/carro2.png"/>
</div>
<div id="area1">
<p>
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo
a ser o texto padrão usado por estas indústrias, desde o ano de 1500, quando uma misturou os caracteres de um
texto para criar um espécime de livro.
</p>
<img src="imagens/carro3.png"/>
</div>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio4.
8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.
Bom, concluímos aqui os exercícios passo a passo. Lembre-se, pratique, pois essa é a única maneira de
aprender. Refaça os exercícios e, qualquer dúvida, chame o instrutor.
Até a próxima aula!
