css 中的媒體查詢被忽略

Question

嘗試在記事本上實現簡單的媒體查詢以進行練習，但似乎沒有起色，我不知道為什么。

<!DOCTYPE HTML>
<style>

.heading {

    margin-left: 220px;
}

@media screen and (max-width: 479px) {
  
  .heading {
    margin-left: 30px;
    }
    
   }
</style>

<h1 class="heading">Hello World</h1>
</html>

當我在 iPhone 視圖的 chrome 瀏覽器中運行它時，它會忽略媒體查詢並改為應用第一個 margin-left。

Answer 1

設置您的視口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 .heading { margin-left: 220px; } @media screen and (max-width: 479px) {.heading { margin-left: 30px; } }

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <h1 class="heading">Hello World</h1>

在此處閱讀更多相關信息。

css 中的媒體查詢被忽略

問題描述

1 個解決方案

解決方案1
3 已采納 2021-05-14 17:42:48

css 中的媒體查詢被忽略

問題描述

1 個解決方案

解決方案1 3 已采納 2021-05-14 17:42:48

解決方案1
3 已采納 2021-05-14 17:42:48