CSS @media 查询无法正常工作

Question

需要为每个移动设备(iPhone 5、6、6+、iPad 以及大屏幕)使用一张图片( Logo )来扩展媒体请求。因此，我几乎需要以宽度等形式指定样式。用于纵向和横向。所有作品仅适用于 iPhone 6、iPad 和大屏幕(=> 1600 像素)对于小屏幕 (320x480) 和 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 name="viewport" content="width=device-width, initial-scale=1.0" />

您也可以考虑像这样为您的 CSS3 选择器添加适当的前缀...

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

等等。您可以查看 w3schools 以获取 css3 前缀的完整列表。我希望这有助于...