我希望我的 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>"
最佳答案
如果浏览器不支持响应式样式表，它们将简单地忽略媒体查询中的任何样式。出于这个原因，您可以简单地将它们一起包含在同一个样式表中。如果您这样做是出于优化目的，我会考虑使用服务器端脚本来解析 user-agent字符串，然后附加必要的样式表。您也可以使用 Internet Explorer conditionals使用 <!-- [if lt IE9] --> 添加样式表有条件的。
还有一个用于不受支持的浏览器的 polyfill，称为 Respond.js .它将解析媒体查询并根据需要在旧版浏览器中添加各种尺寸的样式。
关于html - 响应式和非响应式样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23301243/