誰能告訴我為什么媒體查詢之前在斷點處注冊而不是我的目標

Question

 @media only screen and (max-width: 620px) {
      .priority-images{
      width: 65% !important;
    }
    }   
 @media only screen and (min-width: 320px) {
      .priority-images{
      width: 90% !important;
    }
    }

.priority-images 正在注冊 620 斷點而不是 320 斷點，這讓我感到沮喪，我知道它針對以下所有內容，但是當我在任何建議之前成功使用此方法時？

Answer 1

基本上，您同時遵循mobile-first (min-width)和desktop-first(max-width)方法。 這里有從320px to 620px的重疊，在這種情況下， 320px takes precendence not the 620px.

在您的媒體查詢中：

@media only screen and (max-width: 620px) {...}

視口的目標是從屏幕的width=0到width=620px 。 但是，當您使用時：

 @media only screen and (min-width: 320px) {...}

現在，當您的瀏覽器寬度達到 320px 的寬度時，620px 媒體查詢將被此覆蓋。

根據我的觀察和代碼截圖， .priority-images的優先級不是620px ，而是320px 。 只要瀏覽器寬度大於或等於 320px， min-width:320px媒體查詢就會完全控制 CSS。 所以，我根本看不到在320px瀏覽器寬度之后應用min-width:620px媒體查詢。

檢查以下代碼片段：

 body { height: 100vh; width: 100vw; }.priority-images { height: 90%; margin: 0 auto; } @media only screen and (max-width: 620px) {.priority-images { width: 65% important; background: orange; } } @media only screen and (min-width: 320px) {.priority-images { width: 90% important; background: green; } }

 <,DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1" /> <link rel="stylesheet" href="style.css" /> </head> <body> <article class="priority-images"> There are no accidents... No there are not.!! </article> </body> <script src="./script.js"></script> </html>

Answer 2

如果您希望在達到 320 屏幕尺寸時應用 320 斷點，請更改

 max-width: 620px
 min-width: 320px

至

min-width: 620px     
max-width: 320px

這是codepen https://codepen.io/shammlo/pen/YzGQKjQ

誰能告訴我為什么媒體查詢之前在斷點處注冊而不是我的目標

問題描述

2 個解決方案

解決方案1
0 已采納 2020-12-17 20:30:39

解決方案2
0 2020-12-17 20:32:36

誰能告訴我為什么媒體查詢之前在斷點處注冊而不是我的目標

問題描述

2 個解決方案

解決方案1 0 已采納 2020-12-17 20:30:39

解決方案2 0 2020-12-17 20:32:36

解決方案1
0 已采納 2020-12-17 20:30:39

解決方案2
0 2020-12-17 20:32:36