Question

我想让我的html代码使用两个样式表。那些支持CSS3媒体查询的浏览器应该使用我的响应式CSS。但是，旧浏览器上不支持CSS3媒体查询的那些应该得到一个静态样式表。

到目前为止，这是我的自适应样式表的链接：

<link rel="stylesheet"  type="text/css" charset="utf-8" href="includes/layout.css" />

在此链接中，我想添加以下内容：

media="<insert code that returns true if browser does support media queries>"

Answer 1

如果浏览器不支持自适应样式表，则他们将忽略媒体查询中的任何样式。因此，您可以将它们简单地包含在同一样式表中。如果您出于优化目的而这样做，我会考虑使用服务器端脚本来解析user-agent字符串，然后附加必要的样式表。您还可以使用Internet Explorer conditionals使用条件添加样式表。

还有一个名为Respond.js的不受支持的broswers的polyfill。它将解析媒体查询，并根据需要在各种大小的旧浏览器中添加样式。

Answer 2

我不确定这是否符合您的要求，但您可以使用Modernizr's javascript函数来测试媒体查询支持，然后加载样式表。类似的东西：

var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');
link.rel  = 'stylesheet';
link.type = 'text/css';

if(Modernizr.mq('only all')){
    // load responsive.css
    link.href = 'http://website.com/css/responsive.css';
} else {
    // load non-responsive.css
    link.href = 'http://website.com/css/non-responsive.css';
}
head.appendChild(link);

响应式和非响应式样式表

2 个答案: