[FIX] 디자인 이슈 중 특정화면 크기에서 navbar 깨지는 문제 해결 KUBIC-HGU#92

NaMooJoon · May 4, 2023 · 0cd74d1 · 0cd74d1
1 parent e2ce357
commit 0cd74d1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/app/core/components/navbar/navbar.component.less b/src/app/core/components/navbar/navbar.component.less
@@ -138,7 +138,7 @@ div>ul>li>a {
 }
 
 /*tablet, mobile*/
-@media (max-width: 768px) {
+@media (max-width: 860px) { // max-width: 768px
 
   .login-menu,
   .user-menu{
@@ -354,12 +354,23 @@ div>ul>li>a {
 }
 
 /*tablet*/
-@media (min-width: 426px) and (max-width: 768px){
+@media (min-width: 875px) and (max-width: 1040px){ // max-width: 768px
   .login-menu,
+  .common-menu,
   .user-menu{
-    font-size: 19px;
+    font-size: 16px;
     margin-right: 10px;
   }
+  display: none;
+}
+
+/*tablet*/
+@media (min-width: 426px) and (max-width: 875px){ // max-width: 768px
+  .login-menu,
+  .user-menu{
+    font-size: 14px;
+    margin-right: 8px;
+  }
 }
 
 /*mobile L*/

diff --git a/src/app/core/components/navbar/navbar.component.ts b/src/app/core/components/navbar/navbar.component.ts
@@ -70,7 +70,7 @@ export class NavbarComponent implements OnInit {
   }
 
   selectedStyleObject(flag: boolean): Object {
-    if(matchMedia("(max-width: 768px)").matches) {
+    if(matchMedia("(max-width: 860px)").matches) { // 기존 768px
       if (flag) {
         return {
           color: "#0FBAFF",