CSS3媒体查询不起作用

我最近一直在为网站开发移动版本，并且很简单地希望能够在浏览器被检测到位于移动设备上时更改CSS文件。您可以查看我之前的尝试here，但我现在已经决定完成此操作的最可行方法是关注媒体查询。CSS3媒体查询不起作用

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

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

我是否错过了这段代码？我尝试过使用为此提供的许多教程，但似乎没有人帮助我。我真的在这里遇到了死胡同，所以任何帮助都会受到大力赞赏。

来源

2011-04-11 Liam Spencer

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

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

通常最好是让默认样式表加载并确保移动样式表覆盖默认样式表中不需要的任何东西。

来源

2011-04-11 09:23:47 RoToRa

感谢您的回答。这当然有帮助。问题在于，默认的CSS文件非常大，因此我必须通过每种样式并基本覆盖它以将其去掉。移动样式表没有很多样式元素，因此我决定从头开始创建一个。我想，如果我不得不将所有事情都交给那些只需要做的事情！ – 2011-04-11 09:33:12

您可以使用默认样式表的媒体查询测试旧浏览器。大多数会加载它，因为它开始于“屏幕”。如果您发现某个不加载它的特定浏览器，但您必须支持，则可能会有其他选择。 – RoToRa 2011-04-11 09:45:56

感谢您的帮助，我似乎接近工作解决方案。我有一个查询，但。我不得不使用一些CSS条件来确保样式表使用IE浏览器加载。这引出了一个问题，就是这个页面会如何渲染，比如旧版Firefox不支持CSS3。 – 2011-04-11 10:51:48

完成条件与min-device-width在iOS上工作。注意单词设备。但是，即使没有字设备，它也能在android上正常工作。

来源

2012-07-23 14:30:21 Moriz

我在一个新闻网站使用引导，但它不能在IE8上工作，我用css3-mediaqueries.js JavaScript，但仍然无法正常工作。如果你希望你的媒体查询与此javascript文件工作在CSS

在此处添加的画面投放到媒体查询行是一个示例：

<meta name="viewport" content="width=device-width" /> 
<script type="text/javascript" src="css3-mediaqueries.js"></script> 

<style> 
    @media screen and (max-width:900px) {} 
    @media screen and (min-width:900px) and (max-width:1200px) {} 
    @media screen and (min-width:1200px) {} 
</style> 

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

CSS链接线那么简单，以上线。

来源

2013-08-31 10:12:31 user1290329

如果您有initial-scale=1.0和maximum-scale=1.0，那么user-scalable=0也有点多余。将最大比例设置为等于初始缩放比例意味着用户无法放大，因为它们是以最大缩放比例开始的。

来源

2014-02-18 14:12:50 TylerH

CSS3媒体查询不起作用

回答

相关问题