CSS3媒体查询不工作 [英] CSS3 Media Queries are not working

问题描述

我最近开发了一个网站的移动版本，并且只是想要在浏览器被检测到在移动设备上时能够更改CSS文件。您可以这里查看我之前的尝试，但我现在已决定最可行的做法是专注于媒体查询。

I've recently been developing a mobile version for a website, and quite simply want to be able to change the CSS file if the browser is detected to be on a mobile device. You can view my previous attempts here, but I have now decided that the most feasible way of getting this done is to focus on Media Queries.

我在这里的问题是，媒体查询根本不工作。它总是加载默认样式表。这里是我有的代码：

The problem I have here is that the media queries just don't work at all. It always loads the default stylesheet. Here is the code I have:

<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" />

我错过了这个代码的东西吗？我试过使用提供的许多教程，但没有一个似乎帮助我。

Have I missed something with this code? I've tried using the many tutorials offered for this but none seem to help me. I've really hit a dead end here so any help would be massively appreciated.

推荐答案

默认样式表没有任何将阻止它被加载的属性。

The default stylesheet doesn't have any attributes that would stop it from being loaded.

您可以给它 media =screen和（min-width：481px）对旧的浏览器也不会加载它。

You could give it media="screen and (min-width: 481px)", but that would lead to the danger, that older browsers won't load it either.

通常最好的方法是加载默认样式表，并确保移动样式表覆盖任何内容您不需要使用默认样式表。

Usually it's best, to have the default stylesheet load and just make sure, that the mobile stylesheet overrides anything you don't need from the default stylesheet.

这篇关于CSS3媒体查询不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！