Question

我正在使我的网站对各种设备（平板电脑/手机/等）更具响应性，我想知道如果最后一个样式表是有效的跨浏览器，我是否使用以下内容作为各种布局宽度的指南“所有“，更具体地说是IE5 / 6/7。有谁知道旧版浏览器是否会忽略所有工作表并仅包含最后一个工作表？

<link media="only screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" href="medium.css" type="text/css" rel="stylesheet">
<link media="screen and (min-device-width: 1025px)" href="large.css" type="text/css" rel="stylesheet">

或

@media only screen and (max-device-width: 480px) { /* CSS */ }
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) { /* CSS */ }
@media only screen and (min-device-width: 1025px) { /* CSS */ }

Answer 1

如果您正在考虑使用IE特定样式表，请使用条件评论。

在您的情况下，可以这样做：

<!--[if IE 5]><link media="only screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet"><![endif]-->
<!--[if IE 6]><link media="only screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet"><![endif]-->
<!--[if IE 7]><link media="only screen and (max-device-width: 480px)" href="medium.css" type= "text/css" rel="stylesheet"><![endif]-->
<!--[if GT IE 7]><link media="only screen and (max-device-width: 480px)" href="large.css" type= "text/css" rel="stylesheet"><![endif]-->

如果您想为旧版浏览器实施@media查询，则会有相同的JavaScript回退。

<强> CSS3-mediaqueries-JS

Wouter van der Graaf的css3-mediaqueries.js是一个JavaScript库，可以使IE 5 +，Firefox 1+和Safari 2透明地解析，测试和应用CSS3媒体查询。 Firefox 3.5 +，Opera 7 +，Safari 3+和Chrome已经提供原生支持。

获取Google Code。
Adapt.js - 自适应CSS

Adapt.js是一个轻量级（848字节缩小的）JavaScript文件，用于确定在浏览器呈现页面之前要加载的CSS文件。如果浏览器倾斜或调整大小，Adapt.js只需检查其宽度，并在需要时仅提供所需的CSS。

获取GitHub。
Enquire.js - JavaScript中的媒体查询回调

Enquire.js是一个轻量级的纯JavaScript库，用于处理媒体查询。当GZIP和缩小时，它小于1kb，并且完全没有依赖性。是的，你读得对 - 没有依赖，甚至不是jQuery！如果您希望支持没有本机实现的浏览器，您需要做的最多就是提供matchMedia polyfill。

获取GitHub。

使用旧版浏览器的响应式CSS

1 个答案: