css 中的媒体查询被忽略答案

【问题标题】：Media queries in css being ignoredcss 中的媒体查询被忽略
【发布时间】：2021-05-15 01:42:48
【问题描述】：

尝试在记事本上实现简单的媒体查询练习，但似乎没有起色，我不知道为什么。

<!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。

【问题讨论】：

您没有打开的html 标记或body 标记

标签： html css media-queries

【解决方案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>

阅读更多相关信息here。

【讨论】：

比你！这有帮助！