媒体查询不适用于某些触发器答案

【问题标题】：media Queries not working for certain triggers媒体查询不适用于某些触发器
【发布时间】：2015-04-07 15:59:50
【问题描述】：

第一次使用媒体查询，我有点迷茫。

我已将外部 .css 链接到我的 html 下我的默认样式如下：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width"> 
<title>Title</title>

 <link rel="stylesheet" href="./css/style.css" />
 <link rel='stylesheet' href='./css/breakpoints.css' />

在我的 breakpoints.css 我有：

@media screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
 body{
   background:green;}
 .icon{
   display:none;}
      }
}

@media screen 
and (min-width : 1224px) {
 body{
  background:red;
 }
 header.nav{
  display:none;
  }
}

@媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）

有效，但是

@media screen and (min-width : 1224px)

没有。我的桌面媒体查询没有任何变化，我完全迷失了。我不确定我做错了什么？？？谢谢！

【问题讨论】：

您在第二条规则中缺少 body 类。是这个问题吗？
哎呀，对不起，错字。不，这不是问题:-(。
解决了！我需要语法：@media all (min-width : 1224px)

标签： html css media-queries

【解决方案1】：

响应式 CSS 的正确语法总是有帮助的。你几乎只需要 2 个，这些我相信将来会对某人有所帮助。现在将您的网站设计为大约 2000 像素宽，然后仅应用 MAX-WIDTH css 属性。非常方便，我将它用于我所有的移动/ipad/共振设计。

/* AT 750 PX AND LESS DO THIS */
@media (max-width: 750px) {
.something{
}
}

/* AT 750 PX AND MORE DO THIS */
@media (min-width: 750px) {
.something{
}
}

【讨论】：