html - 响应式和非响应式样式表

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使用 <!-- [if lt IE9] --> 添加样式表有条件的。

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