CSS @media查询无法正常工作
问题描述:
需要为每个移动设备缩放带有一个图像(徽标)的媒体请求:iPhone 5,6,6 +,iPad以及大屏幕上。 因此,我几乎需要指定宽度等形式的样式。对于纵向和横向方向。 所有中只适用于在iPhone 6,iPad的大屏幕(=> 1600像素) 对于小屏幕(480)和iPhone 6+不起作用(在Chrome中查看)CSS @media查询无法正常工作
对于应用为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%;
}
}
答
那么你可以通过确保启动你添加的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前缀的完整列表。我希望这可以帮助...
感谢您的意见。元标记存在。我太努力了)。我会进一步研究 – ZHMEN