fix(headers): 모바일 반응을 위한 viewport 추가,일부 css 수정

Nexters · Oct 2, 2021 · 44b66bc · 44b66bc
1 parent 98ea7f4
commit 44b66bc
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 25 deletions.
diff --git a/assets/css/_device.scss b/assets/css/_device.scss
@@ -3,7 +3,7 @@ $breakpoint-mobile: 840px;
 $breakpoint-tablet: 1200px;
 
 @mixin mobile {
-  @media(max-width: #{$breakpoint-mobile}) {
+  @media (min-width: 0px) and (max-width: #{$breakpoint-mobile}) {
     @content;
   }
 }

diff --git a/components/footer.vue b/components/footer.vue
@@ -111,10 +111,7 @@ footer {
     padding-left: 64px;
     width: 1200px;
     margin: auto auto 32px auto;
-    .copyrights {
-      margin-left: auto;
-      margin-right: 64px;
-    }
+
     .sns {
       display: flex;
       img {
@@ -126,6 +123,17 @@ footer {
         margin-right: 32px;
       }
     }
+    .copyrights {
+      margin-left: auto;
+      padding-right: 64px;
+
+      font-style: normal;
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 24px;
+      text-align: center;
+      letter-spacing: -0.02em;
+    }
   }
 }
 </style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -2,6 +2,9 @@ import type { NuxtConfig } from "@nuxt/types";
 
 const config: NuxtConfig = {
   target: "static",
+  head:{
+    meta:[{charset: 'utf-8'}, {name: 'viewport', content: 'width=device-width, initial-scale=1'}]
+  },
   modules: ["@nuxt/content"],
   components: true,
   content: {
@@ -13,7 +16,7 @@ const config: NuxtConfig = {
     },
   },
   buildModules: ["@nuxt/typescript-build"],
-  plugins: ["~/plugins/composition-api", "~/plugins/vue-mq"],
+  plugins: ["~/plugins/composition-api"],
   css:["~/assets/css/reset.css", "~/assets/css/webfont.css", "~/assets/css/_device.scss"],
   // image:{
   //   facebook: "~/assets/img/facebook.png",

diff --git a/pages/index.vue b/pages/index.vue
@@ -32,26 +32,7 @@ export default defineComponent({
   color: #ffffff;
   display: flex;
   margin: auto;
-  .quick-link {
-    display: flex;
-    flex-direction: row;
-    align-content: center;
-    padding-top: 40px;
 
-    font-style: normal;
-    font-weight: bold;
-    font-size: 16px;
-    line-height: 24px;
-    letter-spacing: -0.02em;
-
-    cursor: pointer;
-
-    img {
-      width: 16px;
-      height: 16px;
-      margin: auto 0 auto 8px;
-    }
-  }
   @include mobile {
     .slogan {
       width: 327px;
@@ -71,6 +52,26 @@ export default defineComponent({
         line-height: 24px;
         letter-spacing: -0.02em;
       }
+      .quick-link {
+        display: flex;
+        flex-direction: row;
+        align-content: center;
+        padding-top: 40px;
+
+        font-style: normal;
+        font-weight: bold;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: -0.02em;
+
+        cursor: pointer;
+
+        img {
+          width: 16px;
+          height: 16px;
+          margin: auto 0 auto 8px;
+        }
+      }
     }
   }
   @include tablet {
@@ -92,6 +93,26 @@ export default defineComponent({
         line-height: 24px;
         letter-spacing: -0.02em;
       }
+      .quick-link {
+        display: flex;
+        flex-direction: row;
+        align-content: center;
+        padding-top: 40px;
+
+        font-style: normal;
+        font-weight: bold;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: -0.02em;
+
+        cursor: pointer;
+
+        img {
+          width: 16px;
+          height: 16px;
+          margin: auto 0 auto 8px;
+        }
+      }
     }
   }
   @include desktop {
@@ -114,6 +135,26 @@ export default defineComponent({
         line-height: 36px;
         letter-spacing: -0.02em;
       }
+      .quick-link {
+        display: flex;
+        flex-direction: row;
+        align-content: center;
+        padding-top: 86px;
+
+        font-style: normal;
+        font-weight: bold;
+        font-size: 24px;
+        line-height: 24px;
+        letter-spacing: -0.02em;
+
+        cursor: pointer;
+
+        img {
+          width: 24px;
+          height: 24px;
+          margin: auto 0 auto 8px;
+        }
+      }
     }
   }
 }