CSS媒体查询未触发

时间:2013-09-02 20:20:53

标签: css media-queries

我有三种样式表:持久性样式表,一种用于Windows 800px或更高版本(“标准”),另一种用于小于800px(“移动”)的窗口。我的问题是标准样式表正在被识别和应用,但是当我将窗口大小调整到800px以下时,移动工作表将被忽略,而我只剩下持久样式。我怀疑这是一个基本的语法错误,但我一直无法找到问题。

<link rel="stylesheet" type="text/css" href="persistentstyle.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:800px)" title="standard" href="style.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:799px)" title="mobile" href="mobilestyle.css"> 

我已在标题中包含必要的元标记:

<meta name="viewport" content="width=device-width" />

谢谢!

2 个答案:

答案 0 :(得分:1)

可能需要this: -

<meta name="viewport" content="width=device-width">

答案 1 :(得分:1)

通常,最常见的错误是不包括CSS媒体查询工作所需的元标记:

<meta name="viewport" content="width=device-width">

This link解释了视口元标记,以及可以为其分配的其他属性,例如允许缩放屏幕等等。