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

这是媒体查询 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 4

使用“最大宽度”代替每个设备固定的“最大设备宽度”。