Merge pull request #250 from boostcampwm-2021/design/reactive#249

[Design] 약간의 반응형
boostcampwm-2021 · Dec 4, 2021 · 3f3b782 · 3f3b782
2 parents c4287ea + b8dbe95
commit 3f3b782
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/frontend/src/styles/global.ts b/frontend/src/styles/global.ts
@@ -4,6 +4,9 @@ import { ColorCode } from '@utils/constants';
 
 const GlobalStyle = createGlobalStyle`
   ${reset}
+  html {
+    font-size: calc(0.35vw + 8.74px);
+  }
   html,
   body,
   span,

diff --git a/frontend/src/templates/BoardTemplate/style.ts b/frontend/src/templates/BoardTemplate/style.ts
@@ -2,5 +2,7 @@ import styled from 'styled-components';
 
 export const Layout = styled.div`
 	position: relative;
+	width: 100%;
 	height: 100%;
+	overflow: hidden;
 `;
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
@@ -60,7 +60,7 @@ const TeamCard = {
 	HEIGHT: '15rem',
 };
 
-const REM = 16; // TODO: 반응형 (style과 별도로 적용)
+const REM = window.innerWidth * 0.0035 + 8.74; // 0.35vw + 8.74px
 
 // const converRemToPx = (rem: number) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);