Add media query

2016-08-25 21:30:36 +03:00
parent ca365d096a
commit 60d7ac35df
2 changed files with 46 additions and 1 deletions
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=PT+Serif&subset=cyrillic" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <title>Здравствуйте</title>
@@ -9,6 +10,9 @@
  <main class="content">

    <h1 class="greeting">Здравствуйте,</h1>
+
+    <h1 class="hello">Привет,</h1>
+
    <p class="text">
      меня зовут Антон Вахрушев, и это моя домашняя страница.<br>
      Здесь вы можете.
--- a/style.css
+++ b/style.css
@@ -8,7 +8,8 @@ body {
    margin: 0 auto;
 }

-.greeting {
+.greeting,
+.hello {
    margin-top: 1.8em;
    font-size: 3.4em;
    margin-bottom: 0.6em;
@@ -22,6 +23,46 @@ body {
    font-weight: normal;
 }

+.hello {
+    display: none;
+}
+
 .text {
    margin-bottom: 0.8em;
 }
+
+
+@media (max-width: 839px) {
+
+    body {
+        font-size: 16px;
+    }
+
+    .content {
+        margin: 20px 0;
+        width: auto;
+    }
+
+    .greeting,
+    .hello {
+        margin-top: 0.8em;
+    }
+
+    .greeting {
+        display: none;
+    }
+
+    .hello {
+        display: block;
+    }
+
+}
+
+@media (max-width: 480px) {
+
+    .content {
+        margin: 10px 0;
+        width: auto;
+    }
+
+}