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

我已链接外部的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屏幕和（分-device-width：320px） and（max-device-width：480px）

Works，but

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

没有。我看到我的桌面媒体查询没有发生变化，而且我完全丢失了。我不知道我在做什么错？谢谢！

来源

2015-02-07 Seven N

您在第二条规则中缺少主体类。这是问题吗？ – 2015-02-07 15:31:28

哎呀，抱歉，错字。不，这不是问题:-(。 – 2015-02-07 15:33:45

解决了！我需要的语法：@media all（min-width：1224px） – 2015-02-07 15:40:04

响应式CSS的正确语法总是有帮助的。你几乎只需要2个，这些我肯定会在未来帮助别人。现在设计你的网站为2000像素宽左右，然后只应用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{ 
} 
}

来源

2015-02-07 18:27:25 technology101010

谢谢！我会试试看！ – 2015-02-07 18:34:37

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

回答

相关问题