Question

我已经查看了我的问题的所有帮助链接，但没有结果。我是试图让我的媒体查询为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文件中我尝试过在搜索中推荐的各种最大宽度和最大高度值。

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

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

媒体查询无法在我的代码中工作

1 个答案: