Capítulo 25 - aula 04

Marcado: #mediaquery

Este tópico contém 11 respostas, 2 vozes e foi atualizado pela última vez 2 anos, 7 meses atrás por ROSANGELA MENDES.

Visualizando 11 respostas da discussão

Autor

Posts
- 15 de setembro de 2022 às 13:23 #101474
  
  ROSANGELA MENDES
  Participante
  
  Não consigo fazer o programa funcionar. Já testei com a cor, com as imagens e o backgraund não muda.
  Permanece no estilo geral.
  Segui todas as orientações do professor Guanabara.
  Tem uma pasta com os exercícios, dentro desta pasta: tem pasta imagen, pasta estilos e index
  vou colar o codigo:
  <!DOCTYPE html>
  <html lang=”pt-BR”>
  
  1) index.html
  <head>
  <meta charset=”UTF-8″>
  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <title>Media Query</title>
  <link rel=”stylesheet” href=”estilos/style.css” media=”all”><!–serve para todas as medias==> É MEDIA TYPE–>
  <link rel=”stylesheet” href=”estilos/retrato.css” media=”screen and(orientation:portrait)”><!–media filters–>
  <link rel=”stylesheet” href=”estilos/paisagem.css” media=”screen and(orientation: landascap)” ><!–media filters–>
  </head>
  <body>
  <h1>Mude a orientação do seu dispositivo</h1>
  </body>
  </html>
  
  2) estilos
  2.1) CONFIGURAÇÕES GERAIS
  @charset “UTF-8”;
  /*Configurações gerais*/
  *{
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  }
  html, body{
  width: 100vw;
  height: 100vw;
  background-color: black;
  }
  h1{
  color: azure;
  text-shadow: 2px 2px 0px rgba(0, 0, 255, 0.514);
  padding: 10px;
  }
  
  2.2) MODO PAISAGEM
  @charset “UTF-8”;
  /*modo paisagem (lendscape)*/
  body{
  background-image: url(../IMG/cev-landscape.jpg);
  }
  
  2.3) MODO RETRATO
  @charset “UTF-8”;
  /*modo retrato (portrait)*/
  body{
  background-image: url(../IMG/cev-portrait.jpg);
  }
- 16 de setembro de 2022 às 12:56 #101579
  
  Tutora Jessica
  Moderador
  
  Ola Rosângela,
  Te sugiro rever essa aula novamente, encontrei alguns erros na escrita em algumas partes do código, espaços que não foram dados que também podem resultar no não funcionamento do código.
  Tente refazer ele mais uma vez, caso não consiga retorne ao fórum que iremos lhe ajudar 🖖
- 16 de setembro de 2022 às 14:35 #101591
  
  ROSANGELA MENDES
  Participante
  
  Olá!
  Ja revi a aula, encontrei alguns erros de espaços. As imagens aparecerem, mas na forma retrato continua não aparecendo.
- 16 de setembro de 2022 às 17:20 #101625
  
  Tutora Jessica
  Moderador
  
  Me envie novamente o código depois de ter revisado.
- 16 de setembro de 2022 às 18:15 #101630
  
  ROSANGELA MENDES
  Participante
  
  INDEX
  <!DOCTYPE html>
  <html lang=”pt-BR”>
  <head>
  <meta charset=”UTF-8″>
  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <title>Media Query</title>
  <link rel=”stylesheet” href=”estilo/style.css”>
  <style>
  
  </style>
  </head>
  <body>
  <h1>Mude a orientação do seu dispositivo</h1>
  </body>
  </html>
- 16 de setembro de 2022 às 18:18 #101633
  
  ROSANGELA MENDES
  Participante
  
  @charset “UTF-8”;
  /*Configurações gerais*/
  *{
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  }
  html, body{
  width: 100vw;
  height: 100vw;
  background-color: black;
  }
  h1{
  color: azure;
  text-shadow: 2px 2px 0px rgba(0, 0, 255, 0.514);
  padding: 10px;
  }
- 16 de setembro de 2022 às 18:19 #101634
  
  ROSANGELA MENDES
  Participante
  
  @charset “UTF-8”;
  /*modo retrato (portrait)*/
  body{
  background-image: url(../IMG/cev-portrait.jpg);
  
  background-position: left bottom;
  }
- 16 de setembro de 2022 às 18:19 #101635
  
  ROSANGELA MENDES
  Participante
  
  @charset “UTF-8”;
  /*modo paisagem (lendscape)*/
  body{
  background-image: url(../IMG/cev-landscape.jpg);
  background-position: left bottom;
  }
- 16 de setembro de 2022 às 18:30 #101637
  
  ROSANGELA MENDES
  Participante
  
  E fiz tb esse código, as folhas de estilo são iguais às anteriores.
  
  <!DOCTYPE html>
  <html lang=”pt-BR”>
  <meta charset=”UTF-8″>
  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <head>
  <title>Media query </title>
  <link rel=”stylesheet” href=”estilos/retrato.css” media=”screen and (orientation: portrait)”>
  <link rel=”stylesheet” href=”estilos/paisagem.css” media=”screen and ( orientation: landscape)”>
  <link rel=”stylesheet” href=”estilos/style.css” media=”all”>
  
  </head>
  <body>
  <h1>Mude a orientação do seu dispositivo</h1>
  </body>
  </html>
- 23 de setembro de 2022 às 14:32 #102112
  Tutora Jessica
  Moderador
  Ola Rosangela,
  Observei novamente seu código e tem alguns erros que ainda persistem, exemplo:
```
<!DOCTYPE html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Media Query</title>
<link rel=”stylesheet” href=”estilo/style.css”>
<style>

</style>
</head>
<body>
<h1>Mude a orientação do seu dispositivo</h1>
</body>
</html>
```
  Nesse primeiro index que me enviou não esta completo, pois não tem os outros css que precisam no código, faltam os :
  
  <linkrel=”stylesheet” href=”estilos/retrato.css” media=”screen and (orientation: portrait)”>
  <link rel=”stylesheet” href=”estilos/paisagem.css” media=”screen and ( orientation: landscape)”>
- 23 de setembro de 2022 às 14:42 #102114
  Tutora Jessica
  Moderador
  Nesse segundo arquivo index que me enviou:
```
<!DOCTYPE html>
<html lang=”pt-BR”>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<head>
<title>Media query </title>
<link rel=”stylesheet” href=”estilos/retrato.css” media=”screen and (orientation: portrait)”>
<link rel=”stylesheet” href=”estilos/paisagem.css” media=”screen and (orientation: landscape)”>
<link rel=”stylesheet” href=”estilos/style.css” media=”all”>

</head>
<body>
<h1>Mude a orientação do seu dispositivo</h1>
</body>
</html>
```
  As tags meta devem ficar dentro do <head>, dessa forma:
```
<!DOCTYPE html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Media query </title>
<link rel=”stylesheet” href=”estilos/retrato.css” media=”screen and (orientation: portrait)”>
<link rel=”stylesheet” href=”estilos/paisagem.css” media=”screen and (orientation: landscape)”>
<link rel=”stylesheet” href=”estilos/style.css” media=”all”>
```
  Se atente na ordem em que a tag style deve ser distribuída, pois interfere no resultado final.. digo isso, pois na aula o professor coloca a tag style com style.css como primeiro, antes de retrato.css e antes de paisagem.css.. o código é interpretado de cima para baixo e se não estiver na ordem correta não terá o resultado esperado.
- 24 de setembro de 2022 às 09:57 #102160
  
  ROSANGELA MENDES
  Participante
  
  Obrigada! Farei as correções!
Autor

Posts

Visualizando 11 respostas da discussão

Você deve fazer login para responder a este tópico.

Capítulo 25 – aula 04

QUER UM SITE IGUAL A ESTE? ACESSE HOSTNET INTERNET