update ex026-mq005

EddyLopes · EddyLopes · commit a1b4c39f61ea · 2025-01-24T06:06:03.000-03:00
diff --git a/Curso-em-Video-Html-CSS/Html-css/Exercicios/ex026-media-query/mq005/index.html b/Curso-em-Video-Html-CSS/Html-css/Exercicios/ex026-media-query/mq005/index.html
@@ -6,8 +6,9 @@
     <title>Media Query</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="media-query.css">
 </head>
-<body>
+<body onresize="mudouTamanhoTela()">
     <header>
         <h1>Meu Site</h1>
         <i id="burguer" class="material-icons" onclick="clickMenu()">menu</i>
@@ -37,8 +38,16 @@ <h2>Testando Media Queries</h2>
                 itens.style.display = 'none';
             } else {
                 itens.style.display = 'block';
-            }
-            
+            }            
+        }
+
+        function mudouTamanhoTela() {
+            /*
+            if(window.innerWidth >= 768) {
+                itens.style.display = 'block';
+            } else {
+                itens.style.display = 'none';
+            } */  
         }
     </script>
 </body>
diff --git a/Curso-em-Video-Html-CSS/Html-css/Exercicios/ex026-media-query/mq005/media-query.css b/Curso-em-Video-Html-CSS/Html-css/Exercicios/ex026-media-query/mq005/media-query.css
@@ -0,0 +1,30 @@
+@charset "UTF-8";
+
+/*
+    pesquisar sobre Typical Device Breakpoints 
+        Recomendações do W3C:
+            Pequenas telas: até 600px
+            Celular: de 600px até 768px
+            Tablet: de 768px até 992px
+            Desktop: de 992px até 1200px
+            Grandes telas: acima de 1200px
+*/
+
+
+@media screen and (min-width: 768px) {
+    i#burguer {
+        display: none;
+    }
+
+    menu {
+        display: block;
+    }
+
+    menu > ul > li {
+        display: inline-block;
+    }
+
+    main {
+        width: 768px
+    }
+}
