css 中的媒体查询被忽略

Question

Trying to implement simple media query for practice on notepad, but it doesn't seem to be picking up and I don't know why.尝试在记事本上实现简单的媒体查询以进行练习，但似乎没有起色，我不知道为什么。

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

When I run this in the chrome browser in iPhone view, it ignores the media query and applies the first margin-left instead.当我在 iPhone 视图的 chrome 浏览器中运行它时，它会忽略媒体查询并改为应用第一个 margin-left。

Answer 1

Set your viewport with:设置您的视口：

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

Read more about it here .在此处阅读更多相关信息。

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