html - 媒体查询不适用于某些触发器

Question

第一次使用媒体查询时，我有点不知所措。

我已将外部 .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 屏幕和(最小宽度:1224px)

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

Answer 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{
}
}