在css中有5个media querie
@media screen and(min-0px)and(max-319px){ body {background-color:red;}
}
@media screen and(min-320px)and(max-480px){ body {background-color:orange;}
}
@media screen and(min-481px)and(max-980px){ body {background-color:yellow;}
}
@media screen and(min-981px)and(max-1200px){ body {background-color:green;}
}
@media screen and(min-1201px){ body {background-color:blue;}
}
网页中包含有5个iframe，如
<iframeframeBorder="0"src="index.html"height="320"width="255"></iframe>
发现在IE9中，不包含框架的页面响应式显示正常，但有框架的页面，iframe中的内容无法实现响应式显示。
解决方法：
在主页中使用， <link href="style.css"rel="stylesheet">
在框架子页（iframe页面）中使用， <link href="style.css?frameX"rel="stylesheet">
如：
Index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="style.css" rel="stylesheet"> </head> <body> <p></p> <hr> 250px frame <iframe frameBorder="0" src="frame1.html" height="100" width="250" id='frame_1'></iframe> <hr> 350px frame <iframe frameBorder="0" src="frame2.html" height="100" width="350" id='frame_2'></iframe> <hr> 390px frame <iframe frameBorder="0" src="frame3.html" height="100" width="390" id='frame_3'></iframe> </div> </body>
frame1.html
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="style.css?page=frame1" rel="stylesheet"> </head> <body> <p></p> </body> </html>
frame2.html
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="style.css?page=frame2" rel="stylesheet"> </head> <body> <p></p> </body> </html>
另外的解决方法——respond.js：
respond.js是为用于IE6-8或其他不兼容Media Queries的 min/max-width属性的浏览器能够使用Media Queries的轻量级js库，其github地址为： https://github.com/scottjehl/Respond。
参考： http://stackoverflow.com/questions/10316247/media-queries-fail-inside-ie9-iframe