0

我正在使我的网站对各种设备（平板电脑/移动设备/等）的响应速度更快，我想知道如果最后一个样式表是有效的跨浏览器“包罗万象”，我是否使用以下内容作为各种布局宽度的指南，更具体地说是 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 */ }
4

1 回答 1

0

如果您正在考虑使用 IE 特定样式表，请使用Conditional Comments。

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

<!--[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 的后备方案。

  1. 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 已经提供原生支持。

    在谷歌代码上得到它。

  2. Adapt.js - 自适应 CSS

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

    在GitHub 上获取它。

  3. Enquire.js – JavaScript 中的媒体查询回调

    Enquire.js 是一个用于处理媒体查询的轻量级纯 JavaScript 库。GZIP 压缩后小于 1kb，绝对没有依赖关系。是的，你没看错——没有依赖，甚至没有 jQuery！如果您希望支持没有本机实现的浏览器，您最多需要做的是提供 matchMedia 填充。

    在GitHub 上获取它。

于 2012-10-06T01:42:37.833 回答