响应CSS与旧版浏览器

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"> 

OR

@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的回退：

在你的情况下，可以作为进行。

1. CSS3-mediaqueries-JS

   CSS3-mediaqueries.js由沃特范德格拉夫是一个JavaScript库使IE 5+，火狐1+和Safari 2透明解析，试验并应用CSS3媒体查询。 Firefox 3.5+，Opera 7+，Safari 3+和Chrome已经提供本地支持。

   请从Google Code获取。

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获取。