Question

我有@media setup

 <head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
CSS:

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

使用此设置可以在iPhone上查看它，但它在浏览器中不起作用。这真的很烦人所以非常感谢帮助。是因为我已经在meta中有设备而且可能有（max-width：480px）而不是？

Answer 1

你的问题有点不清楚，如果你能澄清一下，你的意思是它在浏览器中不起作用？什么在浏览器中不起作用？

这是您的查询对我意味着什么：

@media screen and (min-width: 769px) {}

对于现代移动设备（较旧的移动设备不属于屏幕类别，但较新的iPhone设备）或具有769像素宽或更大屏幕的桌面设备适用于此。（桌面）您可以将其缩写为@media（min-width：769px）并获得相同的结果。

请注意，属于＆＃39;屏幕的iPhone？类别将基于他们当前的方向。因此，必须单独处理肖像和风景。

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { }

对于屏幕分辨率最低为481像素但宽度不超过768像素的设备，请执行此操作。

@media only screen and (max-device-width: 480px) {

对于最大屏幕分辨率为480px的现代设备，请执行此操作。

您的媒体查询都不涉及iPhone，因为您使用的max-device-width相当于设备分辨率和iPhone分辨率远远大于480甚至768.我认为它大约是1280（I＆＃39;我必须查一查）。但更简单的解决方法是使用max-width，或者你可以将它们组合起来：

@media screen and (max-device-width:768px), (max-width:768px) {}

进一步阅读：

CSS3 Media Query Spec

Iphone：媒体css代码不起作用

1 个答案: