[分享]css兼容ie媒体查询

随着时代的进步，用户越来越喜欢在不同的设备上访问网站，因此响应式设计已经变得至关重要。CSS媒体查询是实现响应式设计的关键技术之一，可以使网页在不同的屏幕尺寸上呈现不同的样式和布局。但 CSS 媒体查...

随着时代的进步，用户越来越喜欢在不同的设备上访问网站，因此响应式设计已经变得至关重要。CSS媒体查询是实现响应式设计的关键技术之一，可以使网页在不同的屏幕尺寸上呈现不同的样式和布局。但 CSS 媒体查询在 IE 浏览器中的兼容性常常会成为开发人员的头疼之源。然而，这并不一定意味着放弃媒体查询。

在使用CSS媒体查询时，我们可以使用IE的条件注释（Conditional Comments）来为IE浏览器提供备用样式表，来代替CSS媒体查询。 首先，我们需要在HTML文档的头部添加一些代码:

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

这意味着当用户使用的是 IE 9 或更高版本时，此代码块被忽略。如果用户使用低于IE 9 的版本，则此代码块将与旧版IE一起运行并添加“ie-old.css”样式表。

接下来，在ie-old.css文件中，我们可以使用IE的CSS伪类来处理不支持CSS3媒体查询的IE浏览器:

 @media only screen and (max-width: 480px),
  only screen and (max-device-width: 480px) {
    /* 处理低于480像素的屏幕 */
    body {
      font-size: 14px;
    }
  }
  @media only screen and (max-width: 768px),
  only screen and (max-device-width: 768px) {
    /* 处理低于768像素的屏幕 */
    body {
      font-size: 16px;
    }
  } 

如上所示，我们仅使用CSS2规则来编写样式表。由于CSS2它没有使用基于视口的布局,我们不得不仍然使用基于设备的规则来定位像素，以在IE中获得我们希望的效果。

虽然使用条件注释和另一个样式表添加IE支持是一项繁琐的工作，但是它可以确保您的网站在所有浏览器上的完美呈现，包括旧版的IE浏览器。