CSS @media查詢無法正常工作

Question

需要爲每個移動設備縮放帶有一個圖像（徽標）的媒體請求：iPhone 5,6,6 +，iPad以及大屏幕上。 因此，我幾乎需要指定寬度等形式的樣式。對於縱向和橫向方向。 所有中只適用於在iPhone 6，iPad的大屏幕（=> 1600像素） 對於小屏幕（480）和iPhone 6+不起作用（在Chrome中查看）

對於應用爲iPhone 6+媒體查詢對於iPhone 5 ...

請告訴我，請問我的代碼有什麼問題？ 我將不勝感激！

這裏的CSS：

@media only screen and (max-width: 320px) and (max-width : 480px) { 
.logo-mobile img { 
    width: 150px; 
    transform: translateY(-7px); 
} 
} 

@media only screen and (min-width: 321px) and (max-width : 480px) { 
.logo-mobile img { 
    width: 150px; 
    transform: translateY(-7px); 
} 
} 

@media only screen and (min-width: 320px) and (max-height: 568px) and 
(orientation: landscape) and (-webkit-device-pixel-ratio: 2){ 
.logo-mobile img { 
    width: 144px; 
    transform: translateY(-7px); 
} 
} 

@media only screen and (min-width: 320px) and (max-height: 568px) and 
(orientation: portrait) and (-webkit-device-pixel-ratio: 2){ 
.logo-mobile img { 
    width: 144px; 
    transform: translateY(-7px); 
} 
} 

@media only screen and (min-width: 375px) and (max-height: 667px) and 
(orientation: landscape) and (-webkit-device-pixel-ratio: 2){ 
.logo-mobile img { 
    width: 144px; 
    transform: translateY(-8px); 
} 
} 

@media only screen and (min-width: 375px) and (max-height: 667px) and 
(orientation: portrait) and (-webkit-device-pixel-ratio: 2){ 
.logo-mobile img { 
    width: 100%; 
    transform: translateY(-11px); 
} 
} 

@media only screen and (min-width: 414px) and (max-height: 736px) and 
(orientation: landscape) and (-webkit-device-pixel-ratio: 2) { 
.logo-mobile img { 
    width: 144px; 
    transform: translateY(-8px); 
} 
} 

@media only screen and (min-width: 414px) and (max-height: 736px) and 
(orientation: portrait) and (-webkit-device-pixel-ratio: 2) { 
.logo-mobile img { 
    width: 144px; 
    transform: translateY(-8px); 
} 
} 

@media only screen and (min-width: 768px) and (max-width: 1024px) and 
(orientation: landscape) and (-webkit-device-pixel-ratio: 2) { 
.logo-mobile img { 
    width: 100%; 
    transform: translateY(-8px); 
} 
} 

@media only screen and (min-width: 768px) and (max-width: 1024px) and 
(orientation: portrait) and (-webkit-device-pixel-ratio: 2) { 
.logo-mobile img { 
    width: 100%; 
    transform: translateY(5px); 
} 

@media only screen and (min-width: 1600px) { 
.logo-mobile img {`enter code here` 
    width: 100%; 
} 
} 

Answer 1

那麼你可以通過確保啓動你添加的meta標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

你也可以考慮加入適量的前綴您CSS3選擇器是這樣的...

-webkit-transform: translateY(8px)//Chrome 
-o-transform: translateY(8px) //Opera 

等等。您可以檢查w3schools以獲取css3前綴的完整列表。我希望這可以幫助...