mediaqueries

arielmlima · arielmlima · commit 71133943d914 · 2024-04-07T07:59:22.000-03:00
diff --git a/EXERCICIOS/EXE026/mediafeatures.txt b/EXERCICIOS/EXE026/mediafeatures.txt
@@ -1,5 +1,17 @@
-Algo que ficou no ar quando se fala de telas/screen é que elas tem varios tamanhos, e não tem um media type para cada tamanho de tela. Mas para esse problema, existe o MEDIA FEATURES que vai nos ajudar a configurar cada uma dessas telas.
+Algo que ficou no ar quando se fala de telas/screen é que elas tem varios tamanhos, e não tem um media type para cada tamanho de tela. 
+
+Mas para esse problema, existe o MEDIA FEATURES que vai nos ajudar a configurar cada uma dessas telas.
 
 Media Query = media type + media features 
 
-5m 30aula
+Media type: Tipo de midia
+
+Media features: Caracteristicas de midia 
+
+E fora isso, vemos que usamos nos dois estilos algumas partes iguais o código é escrito da mesma forma, e é para isso que vamos utilizar o tipo all.
+
+Os media features vem dentro de parenteses.
+
+<link rel="stylesheet" href="estilos/paisagem.css" media="screen and (orientation: landscape)">
+
+Quando uso media posso usar media types e tambem media features. media type não tem parenteses, media features sim, se tiver 3 media features são 3 parenteses.
diff --git a/EXERCICIOS/EXE026/mq002/estilos/paisagem.css b/EXERCICIOS/EXE026/mq002/estilos/paisagem.css
@@ -0,0 +1,2 @@
+@charset "UTF-8";
+/* Aparelho em deitado (landscape) */
diff --git a/EXERCICIOS/EXE026/mq002/estilos/retrato.css b/EXERCICIOS/EXE026/mq002/estilos/retrato.css
@@ -0,0 +1,2 @@
+@charset "UTF-8";
+/* Aparelho em pé (portrait) */
diff --git a/EXERCICIOS/EXE026/mq002/estilos/style.css b/EXERCICIOS/EXE026/mq002/estilos/style.css
@@ -0,0 +1 @@
+@charset "UTF-8";
diff --git a/EXERCICIOS/EXE026/mq002/imagens/cev-landscape.jpg b/EXERCICIOS/EXE026/mq002/imagens/cev-landscape.jpg
diff --git a/EXERCICIOS/EXE026/mq002/imagens/cev-portrait.jpg b/EXERCICIOS/EXE026/mq002/imagens/cev-portrait.jpg
diff --git a/EXERCICIOS/EXE026/mq002/index.html b/EXERCICIOS/EXE026/mq002/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Media Queries</title>
+    <!-- Vamos fazer a configuração geral aqui, para todos, e outras media queries para telas em pé e deitadas.  -->
+    <link rel="stylesheet" href="estilos/style.css" media="all">
+
+    <link rel="stylesheet" href="estilos/retrato.css" media="screen and (orientation: portrait)">
+    <!-- Para todas as telas que estejam em modo retrato -->
+
+    <link rel="stylesheet" href="estilos/paisagem.css" media="screen and (orientation: landscape)">
+    <!-- Orientação para todas as telas que estejam em modo paisagem -->
+</head>
+<body>
+    <h1>Mude a orientação dos seus dispositivos</h1>
+</body>
+</html>
+
+<!-- A orientação seria tipo quando tenho uma tela de celular, tablet, e ela ta em pé ou deitada. Virando a  tela, exibe outro formato de exibição.
+
+Os computadores vão pegar pela resolução da tela, se a altura é maior que a largura: Modo PORTRAIT 
+
+Se a largura é maior que a altura: Modo LANDSCAPE
+
+
+E nos nao vamos precisar criar uma configuração para quem acessa em pé e outra para quem acessa com ele deitado, vamos fazer isso aqui: media='all', que vão servir para todos os dispositivos!-->

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@charset "UTF-8";`
	`2`	`+/* Aparelho em deitado (landscape) */`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@charset "UTF-8";`
	`2`	`+/* Aparelho em pé (portrait) */`