媒体查询取消链接 IE8 样式表答案

【问题标题】：media query unlinking IE8 stylesheet媒体查询取消链接 IE8 样式表
【发布时间】：2014-03-18 17:35:01
【问题描述】：

所以我的代码中有一个媒体查询来检查设备宽度。它工作正常，只是在 IE8 或更低版本中显然不行，因为不支持媒体查询。

因此，我试图向 IE8 扔一个样式表（我想我会选择为较低分辨率构建的样式表）但似乎我的媒体查询（无论是在 IE8 评论之前还是之后）阻止 IE8 链接到任何样式表完全没有。

请有人告诉我一个解决方法吗？有没有办法在 IE8 注释中检查设备宽度？

这是我的代码；

<!DOCTYPE HTML>
     <html lang="en">
         <head>

             <meta charset="UTF-8">
             <!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->


                 <link type="text/css" rel="stylesheet"  media="screen
    and (min-device-width:600px) and (max-device-width:1024px)" href="oldScreen.css">
                 <link type="text/css" rel="stylesheet"  
 media="screen   and (min-device-width:1025px)" href="home.css">

                 <!--[if lt IE 9]>
 <link type="text/css" rel="stylesheet" href="oldScreen.css">
 <![endif]-->

【问题讨论】：

解决方法：JavaScript。
所以你是说如果没有 javascript，如果你的网站可以在 IE8 中打开，你就永远无法使用媒体查询？

标签： html css internet-explorer-8

【解决方案1】：

我猜 IE8 不喜欢对同一个样式表的两个引用。如果是这种情况，那么您可以通过向其中一个引用添加一个虚拟参数并让浏览器将其视为两个单独的样式表调用来摆脱困境：<link type="text/css" rel="stylesheet" href="oldScreen.css?iedummy">

编辑：

改变

到

【讨论】：

【解决方案2】：

将这些媒体查询移出到 CSS 文件中（切勿将媒体查询内联）。
遵循标准设备尺寸的格式。 (http://css-tricks.com/snippets/css/media-queries-for-standard-devices/)

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

【讨论】：