IE 忽略样式表中的 @media

发布于 2024-12-02 08:51:03 字数 399 浏览 1 评论 0原文

在我的样式表中，我有这 3 行根据屏幕分辨率调整字体大小。它在除 IE 之外的所有浏览器中都能完美运行（我测试了 IE7-8）。

@media screen and (min-width: 0px) and (max-width: 1199px){html, body{font-size:8px;}}
@media screen and (min-width: 1200px) and (max-width: 1499px){html, body{font-size:9.5px;}}
@media screen and (min-width: 1500px){html, body{font-size:11px;}

我该如何解决这个问题？是否有我可以添加的 hack、脚本、插件以使其在 IE 中工作？谢谢

原文

At the biginning of my stylesheet, I have those 3 lines that adjust the font-size depending of the sreen resolution. It work perfectly in all browsers except IE (I tested IE7-8).

@media screen and (min-width: 0px) and (max-width: 1199px){html, body{font-size:8px;}}
@media screen and (min-width: 1200px) and (max-width: 1499px){html, body{font-size:9.5px;}}
@media screen and (min-width: 1500px){html, body{font-size:11px;}

how can i resolve this problem?
Is there an hack, script, pluggin i can add to make it work in IE ?
Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

念﹏祤嫣 2024-12-09 08:51:03

IE 8 及更低版本不理解媒体查询。您可以在 HTML 中使用注释使样式表仅对 IE 可见。
请参阅此页面以获取说明：http://css-tricks.com/how- to-create-an-ie-only-stylesheet/

例如：

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

在下面的示例中，媒体查询为宽度不超过 480 像素的屏幕提供一个样式表，为宽度为 481 像素或更大的屏幕提供另一个样式表。它为 IE 8 或更低版本的用户提供相同的样式表：

<link
    rel="stylesheet"
    type="text/css"
    media="screen and (max-device-width: 480px)" href="/css/style.css" />

<link
    rel="stylesheet"
    type="text/css"
    media="screen and (min-device-width: 481px)" href="/css/style.css"/>   

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

IE 8 and below don't understand media queries. You can use a comment in your HTML to make a stylesheet visible to only IE.
See this page for an explanation: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Eg:

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

In the below example, a media query serves one stylesheet to screens up to 480px wide, and another for screens 481 or larger. It serves the same stylesheet to users of IE 8 or below:

<link
    rel="stylesheet"
    type="text/css"
    media="screen and (max-device-width: 480px)" href="/css/style.css" />

<link
    rel="stylesheet"
    type="text/css"
    media="screen and (min-device-width: 481px)" href="/css/style.css"/>   

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

回复收藏 0 原文