CSS媒体查询无效

Question

我一直在尝试在CSS文档中进行媒体查询，例如：

@media screen and (max-device-width: 480px) { /*css here*/}

但是当我在iPhone上测试它时它不起作用。我尝试过更改尺寸并使用纵向/横向功能，但仍然没有。我做错了什么？

Answer 1

检查你有

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

在你的文档的负责人

祝你好运

Answer 2

当我在HTML的头部链接CSS时，我总是打电话给我。

我正在处理的当前页面的示例：

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />

这将选择将从头开始加载的CSS文档，而不是在加载CSS文档后选择样式（减少HTTP请求的数量）

在CSS文档中执行此操作时，通常应将max-device-width替换为max-width。

Answer 3

使用“max-width”而不是“max-device-width”，这是每台设备修复的。

Answer 4

这是一个样本媒体查询css

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
your css here
}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
your css here
}
/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
your css here
}

很难理解，因为你没有提供代码..但是人们通过不添加这个元数据而犯下的常见错误

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

Answer 5

我不确定，但我认为iphone的max-device-width是640px。试一试。

Answer 6

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

}

它似乎在Android和iPhone上都运行良好。