Question

第一次使用媒体查询时，我有点迷失了。

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

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

@media屏幕和（最小设备宽度：320px）和（max-device-width：480px）

工作，但

@media screen and（min-width：1224px）

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

Answer 1

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

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

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

media查询不适用于某些触发器

1 个答案: