Css SASS 3.2媒体查询和Internet Explorer支持

我最近在一个项目中使用

@content

块实现了SASS 3.2，我刚刚达到了需要包括对旧浏览器（如IE7和IE8）的支持的程度

例如：

.overview {
  padding: 0 0 19px;

  @include respond-to(medium-screens) {
    padding-top: 19px;
  } //medium-screens

  @include respond-to(wide-screens) {
    padding-top: 19px;
  } //medium-screens
}

它们都不支持媒体查询，在过去，当我将媒体查询分离为单独的部分文件（如_320.scss、_480.scss）时，我经常通过向这些浏览器提供所有样式来处理这些问题，并在IE样式表中这样加载它们：

@import 320.scss;
@import 480.scss;
etc.

这将加载所有样式，并始终为IE7-8分配940px（或任何最大宽度）的布局和样式。通过像这样在SASS 3.2内联中嵌套样式，它消除了对单独的部分样式表的需要，但完全搞乱了我为IE加载样式的方式

关于如何应对这种情况，有什么想法或解决方案吗？我可以使用一个polyfill，比如respond.js来强制IE使用媒体查询，但我更愿意为IE提供一个非灵活的站点

有没有关于如何最好地组织这些文件或更好的解决方案的想法？

有一个我使用的IE过滤器变量。您可以使用全局变量$forIE或其他类似的东西，将媒体查询mixin封装在if中，然后生成带有或不带查询的样式表

@if $forIE == 0 {
    // Media Query Mixin
}

或者使用@if导入第三个SCS（\u forIE.scss？），它将用IE特定的样式覆盖内容。

我已经看到了实现这一点的最新方法。这种技术会自动为IE创建一个单独的样式表，在媒体查询中使用所有相同的样式，但不使用媒体查询本身

---

如果你有兴趣的话，我还发起了一场运动，希望把这项技术融入流行音乐中

你可以为IE生成一个单独的样式表如果你想把所有东西都放在一个屋檐下，并且只对你的老浏览器访问者发出一个http请求，你可以这样做

设置对mixin的初始响应

// initial variables set-up

$doc-font-size: 16;
$doc-line-height: 24;

// media query mixin (min-width only)

@mixin breakpoint($point) {
    @media (min-width: $point / $doc-font-size +em) { @content; }
}

这将创建一个最小宽度的媒体查询，并将px值（$point）作为em值输出

从这里你需要创建这个mixin

@mixin rwdIE($name, $wrapper-class, $IE: true) {
  @if $IE == true {
      .lt-ie9 .#{$wrapper-class} {
        @content;
      }
    .#{$wrapper-class}  {
       @include breakpoint($name) {
         @content;
       }
    }
  }
  @else if $IE == false {
    .#{$wrapper-class}  {
      @include breakpoint($name) {
          @content;
      }
    }  
  }
}

这里，如果你通过一块像这样的Sass（SCS）

@include rwdIE(456, test) {
  background-color: #d13400; 
}

它将返回此代码

.lt-ie9 .test {
  background-color: #d13400;
}

@media (min-width: 28.5em) {
  .test {
    background-color: #d13400;
  }
}

这将在一个文件中提供IE和“新浏览器”CSS。如果你写-

@include rwdIE(456, test, false) {
  background-color: #d13400; 
}

你会得到-

@media (min-width: 28.5em) {
  .test {
    background-color: #d13400;
  }
}

---

我希望这能有所帮助，我在这里的代码笔上也有这样的代码-

我在很多工作中使用较少的代码，但在大型项目中，由于许多人跨文件工作，我不喜欢使用断点文件，例如1024.LESS

我和我的团队使用一种模块化方法，比如header.less，它只包含头的所有代码，包括相关的断点

为了解决IE问题（我们在公司环境中工作），我使用以下方法：

@media screen\9, screen and (min-width: 40em) {
    /* Media queries here */
}

媒体查询中的代码始终由IE7或更少版本执行。IE9及以上版本遵守媒体查询，就像一个合适的浏览器应该遵守的那样。问题是IE8。要解决这个问题，您需要使其行为类似于IE7

X-UA-Compatible "IE=7,IE=9,IE=edge"

我发现，如果在HTML中的元标记中设置，这并不总是有效的，所以请使用服务器头进行设置

见这里的要点：

---

让IE8表现得像IE7并不是一个适合所有人的解决方案，但它符合我的需要。

你找到过这个问题的答案吗？我有完全相同的问题。这也可以用于

@media\0screen\，screen\9{…}

，它可以将css应用到IE8，而不必像IE7（来自）

@media (min-width: 28.5em) {
  .test {
    background-color: #d13400;
  }
}

@media screen\9, screen and (min-width: 40em) {
    /* Media queries here */
}

X-UA-Compatible "IE=7,IE=9,IE=edge"