css - 媒体查询不适用于 chrome(桌面),但适用于 firefox

标签 css

我正在研究媒体查询,这些在 chrome 中不起作用,但在 firefox 中起作用。如何使它们在 chrome 中起作用? 这是我的 CSS 代码

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    body {
      background-color: yellow;
    }
    
    @media screen and (max-width: 400px) {
      body {
        background-color: green;
      }
    }
    
    @media screen and (max-width: 900px) {
      body {
        background-color: red;
      }
    }
  </style>
</head>

<body>
</body>

</html>

最佳答案

试试这个:

@media (max-width: 400px){
  // your css here
}

关于css - 媒体查询不适用于 chrome(桌面),但适用于 firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49898506/

相关文章:

html - 如何为背景图片提供 alt 和标题?

php - 将属性添加到通过 wp_register_style 生成的链接标记?

html - 语义 ui 左菜单占用太多空间

html - 如何创建不同尺寸的圆形图像

javascript - Bootstrap star-rating inside popover CSS 问题

css - Firefox 不考虑 SVG 文本中的字体大小

css - 带有 jQ​​ueryUI 的 IE7+ 圆 Angular

html - 在 Bootstrap 中隐藏 vimeo 播放栏

html - :hover using inline style?怎么写

html - 努力隐藏 SVG 以用于某些 svg 动画