медиа-запросы, не работающие в моем коде

Question

Я прошел через все ссылки справки по моей проблеме без каких-либо результатов. Я , пытаясь заставить мои медиа-запросы работать на IPHONE 6.

Ничего не происходит.

У меня есть мета-тег:

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

Вот мои заявления ссылка отн

<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.
Я пробовал различные значения max-width и max-height, рекомендованные в моих поисках.

Ничего не работает. Что мне не хватает?

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>