[FE] 반응형 디자인 적용 (#36)

feat : 반응형 디자인 적용
cpr-nlp-3 · Feb 22, 2024 · 5cb132d · 5cb132d
1 parent 17efeb2
commit 5cb132d
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/front/src/styles/Globalstyles.styles.tsx b/front/src/styles/Globalstyles.styles.tsx
@@ -26,6 +26,46 @@ const GlobalStyles = styled.createGlobalStyle`
     font-family: "Pretendard";
     src: url(/fonts/PretendardVariable.woff2) format("woff2");
   }
+
+  html {
+    font-size: 20px;
+  }
+
+  @media (max-width: 1600px) {
+    html {
+      font-size: 18px;
+    }
+  }
+
+  @media (max-width: 1366px) {
+    html {
+      font-size: 16px;
+    }
+  }
+
+  @media (max-width: 1280px) {
+    html {
+      font-size: 14px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    html {
+      font-size: 12px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    html {
+      font-size: 10px;
+    }
+  }
+
+  @media (max-width: 576px) {
+    html {
+      font-size: 8px;
+    }
+  }
 `;
 
 export default GlobalStyles;