媒體查詢不執行

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%; 
    } 
}