Olá professores,

Como estou sem muito tempo para responder todos os exercícios, então vai esse exemplo que fiz em outro curso. Podem testar. A medida que a janela do navegador vai diminuindo ele identifica o tamanho da tela e mostra o valor do tamanho da tela.

TESTANDO MEDIA QUERY

Mude o tamanho do seu navegador para ver as mudanças.

Sua área de visão atual é: menor que 600px entre 600 - 900px maior que 900px

Alura - Cursos online de tecnologia Grid CSS .

</body>

+++++++++++++++++++
pagina.css

body {
padding: 15px;
background:#eee;
font-family: Arial, Helvetica, sans-serif
}
.caixa {
border: solid 1px #333;
padding: 5px 10px; margin: 40px;
}
.area-visivel span {
color: #666;
display: none;
}
/* max-width /
@media screen and (max-width: 600px) {
.um {
background: #F9C;
}
span.lt600 {
display: inline-block;
}
}
/ min-width /
@media screen and (min-width: 900px) {
.dois {
background: #F90;
}
span.gt900 {
display: inline-block;
}
}
/ min-width & max-width */
@media screen and (min-width: 600px) and (max-width: 900px) {
.tres {
background: #9CF;
}
span.bt600-900 {
display: inline-block;
}
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #212ff3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
p{
font-family: Arial;
font-size: 12pt;
letter-spacing: 0.5em;
text-align: justify;
color: red;
}