媒体查询在我的代码中不起作用答案

【问题标题】：media queries not working in my code媒体查询在我的代码中不起作用
【发布时间】：2015-04-03 06:45:31
【问题描述】：

我浏览了我的问题的所有帮助链接，但没有任何结果。我是试图让我的媒体查询适用于 IPHONE 6。

什么都没有发生。

我有一个元标记：

<meta name="viewport" content="width=device-width" />

这是我的链接 rel 声明

   <link rel="stylesheet" media="all and (orientation:portrait)"      href="portrait.css" />
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />  

<link href="cliff.css" rel="stylesheet" type="text/css" />

这是我的媒体查询：

@media only screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)
{
.calendar
{width:70%;}    
}
    @media only screen and (min-device-width: 414x) and (max-device-width: 425px) { iPhone6+ Styles }
{
.calendar
{width:85%;}
.content
{float:none; width:100%;}
.sidebar1 {
display:none;}
.header {display:none;}
.maincontent {text-align:left;}

}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) 
{
.calendar
{width:85%;}
.content
{float:none; width:100%;}
.sidebar1 {
display:none;}
.header {display:none;}
.maincontent {text-align:left;}

}

@media only screen and (min-device-width: 359px) and (max-device-width: 361px) { iPhone6+ Alt Styles }
{
.calendar
{width:85%;}
.content
{float:none; width:100%;}
.sidebar1 {
display:none;}
.header {display:none;}
.maincontent {text-align:left;}

}
@media only screen and (min-device-width: 319px) and (max-device-width: 480px) { iPhone5 or less Styles }
{
.calendar
{width:85%;}
.content
{float:none; width:100%;}
.sidebar1 {
display:none;}
.header {display:none;}
    .maincontent {text-align:left;}

}

我已将媒体查询放入每个 css 文件中。
我尝试了搜索中推荐的各种最大宽度和最大高度值。

没有任何作用。我错过了什么？

【问题讨论】：

如果这是您的 CSS 原样复制，则可能存在一些语法错误。例如@media only screen and (min-device-width: 414x) and (max-device-width: 425px) { iPhone6+ Styles } { 无效。

标签： css web media-queries

【解决方案1】：

这是行不通的，因为你这样做完全错误。以这种方式使用@media 查询。

<style>

.test{
    background-color:#F00;
    height:200px;
    width:1200px;
}

@media (max-width: 1260px) {
    .test{
    background-color:#0C0;
    width:900px;
    }
}

@media (max-width: 960px) {
    .test{
    background-color:#FF0;
    width:500px;
    }
}

@media (max-width: 560px) {
    .test{
    background-color:#0CF;
    width:320px;
    }
}

</style>

<div class="test"></div>

【讨论】：