媒体查询不执行

Question

我有以下两个媒体查询：

@media (max-width: 800px) { 
     .login{ 
      margin-top: 5%; 
     } 
    } 
} 

@media (max-width: 204px) { 
     .login{ 
      text-align: center; 
      margin-right: 0%; 
     } 
    } 
} 

• 桌面到移动
• 当注释掉上查询下一个执行
• 当应用在开发工具它的工作原理底部查询造型
• 我读过这有关查询：https://css-tricks.com/logic-in-media-queries/

我不能理解正确的东西。

Answer 1

看起来你有一个太多的可能会让事情变得糟糕的闭合括号。

@media (max-width: 800px) { 
    .login { 
     margin-top: 5%; 
    } 
} 

@media (max-width: 204px) { 
    .login { 
     text-align: center; 
     margin-right: 0%; 
    } 
} 

Answer 2

您已添加额外的右大括号。请删除它。

@media (max-width: 800px) { 
    .login { 
     margin-top: 5%; 
    } 
} 

@media (max-width: 204px) { 
    .login { 
     text-align: center; 
     margin-right: 0%; 
    } 
}