CSS3媒体查询无效

Question

我最近一直在为一个网站开发一个移动版本,如果检测到浏览器在移动设备上,我很想改变CSS文件.您可以在此处查看我以前的尝试,但我现在已经确定完成此操作的最可行方法是关注媒体查询.

我在这里遇到的问题是媒体查询根本不起作用.它总是加载默认样式表.这是我的代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

我错过了这段代码吗？我已经尝试使用为此提供的许多教程,但似乎没有人帮助我.我真的在这里死路一条,所以任何帮助都会受到大力赞赏.

Answer 1

默认样式表没有任何可以阻止加载的属性.

你可以给它media="screen and (min-width: 481px)",但这会导致危险,旧的浏览器也不会加载它.

通常最好是加载默认样式表并确保移动样式表覆盖默认样式表中不需要的任何内容.