Media query testings

jpmti2016 · May 23, 2020 · 9cfd2f5 · 9cfd2f5
1 parent ebe4c67
commit 9cfd2f5
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/media-query.css b/media-query.css
@@ -0,0 +1,48 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Roboto", sans-serif;
+  font-size: 1.3rem;
+}
+
+.example {
+  width: 90%;
+  margin: 5em auto;
+  padding: 10em 0;
+  background-color: steelblue;
+}
+
+/* 
+Mobile first, the default style is mobile
+And for bigger screen you overrride 
+the style as needed (the specified properties)
+*/
+
+/* The order is relevant */
+
+/* 600px or bigger */
+@media (min-width: 600px) {
+  .example {
+    background-color: olivedrab;
+  }
+}
+@media (min-width: 800px) {
+  .example {
+    background-color: orangered;
+  }
+}
+/* Desktop first */
+/* 600px or smaller */
+@media (max-width: 600px) {
+  .example {
+    background-color: red;
+  }
+}
+/* Between 600px and 900px */
+@media (min-width: 600px) and (max-width: 900) {
+}
diff --git a/media-query.html b/media-query.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="media-query.css" />
+  </head>
+  <body>
+    <div class="example"></div>
+  </body>
+</html>