媒體查詢沒有正確使用

Question

我想在我的網站上使用媒體查詢，一開始它運行良好，但後來當我完成所有媒體查詢部分網站設計工作不正常時，這是媒體查詢我在style.css使用：

@media screen and (max-width: 768px) {}

@media screen and (max-width: 375px) {}

@media screen and (max-width:1920px) {}

@media screen and (max-width:1440px) {}

在intex.html文件：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

加入這一切只有最後一個媒體查詢與1440px工作後。可能的原因是什麼？

Answer 1

嘗試使用媒體查詢作爲下，即指定確切地應用哪些媒體查詢。

@media screen and (max-width: 375px) {} 

@media screen and (min-width: 376px) and (max-width: 768px) {} 

@media screen and (min-width: 769px) and (max-width:1440px) {} 

@media screen and (min-width: 1441px) and (max-width:1920px) {} 

Answer 2

您可能錯過了關閉媒體查詢的一些括號{}。檢查您是否已關閉所有媒體查詢。

Answer 3

我建議像下面的順序使用媒體查詢。它會工作。

@media screen and (max-width:1440px) {} 

@media screen and (max-width:1920px) {} 

@media screen and (max-width: 768px) {} 

@media screen and (max-width: 375px) {}