Question

我最近使用@content块在我正在处理的项目中使用SASS 3.2实现了this technique，我刚刚到了需要支持旧版浏览器的地步作为IE7和8。

示例：

.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提供一个非灵活的网站。

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

Answer 1

您可以为IE＆lt; 9生成一个单独的样式表，其中包含普通表格所具有的所有内容，但基于设定宽度的平面媒体查询。

这里有完整的解释http://jakearchibald.github.com/sass-ie/，但基本上你有这个混音：

$fix-mqs: false !default;

@mixin respond-min($width) {
    // If we're outputting for a fixed media query set...
    @if $fix-mqs {
        // ...and if we should apply these rules...
        @if $fix-mqs >= $width {
            // ...output the content the user gave us.
            @content;
        }
    }
    @else {
        // Otherwise, output it using a regular media query
        @media screen and (min-width: $width) {
            @content;
        }
    }
}

您可以这样使用：

@include respond-min(45em) {
    float: left;
    width: 70%;
}

这将在all.scss内，使用媒体查询将其编译为all.css。但是，您还有一个额外的文件all-old-ie.scss：

$fix-mqs: 65em;
@import 'all';

这只是导入所有内容，但在给定假宽度为65em的情况下展平媒体查询块。

Answer 2

我在很多项目中都使用LESS，但在较大的项目中，有很多人在文件中工作，我不喜欢使用断点文件，例如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中的元标记中设置它并不总是有效，所以使用服务器标头设置它。

见这里的要点： https://gist.github.com/thefella/9888963

让IE8像IE7一样行动并不适用于所有人，但它符合我的需求。

Answer 3

Jake Archibald has the best technique我已经看到了实现这一目标的日期。此技术自动为IE创建一个单独的样式表，在媒体查询中具有所有相同的样式，但没有媒体查询本身。

如果你对使用它感兴趣，我还会竞选将这种技术内置到流行的breakpoint extension for Sass中！

Answer 4

如果您希望将所有内容保留在一个屋檐下，并且只为您的旧浏览器访问者提供一个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; }
}

这将创建一个min-width媒体查询并输出你的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（SCSS）

@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;
  }
}

我希望这会有所帮助，我也在这里使用了一个codepen - http://codepen.io/sturobson/pen/CzGuI

Answer 5

我使用的CSS3 Mixin具有IE过滤器的变量。您可以通过使用全局变量$ forIE或其他东西来做类似的事情，将媒体查询mixin包装在if中，然后使用或不使用查询生成样式表。

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

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

SASS 3.2媒体查询和Internet Explorer支持

5 个答案: