css - 在没有脚本的情况下支持 IE8 移动优先的最佳方式？

Question

我正在使用 SASS、Compass、Bourbon 和 Neat 创建一个精彩的响应式网站。

但是，我突然意识到 IE8(缺乏媒体查询支持)只会输出移动版本，因为我使用的是移动优先方法。

有没有办法使用SASS自动生成IE8的样式，并将所有最大的媒体查询转换为默认值？我希望 IE8 只获得完整的桌面外观。

由于性能和维护问题，我想避免使用像respond.js这样的脚本。

---

解决方案:

我正在将 Compass 与 Bourbon SASS 库一起使用。 Bourbon 有一个我想使用的 media() mixin。

根据下面选定的答案，我最终为 bourbon 提供的 media() mixin 创建了一个简单的包装器 mixin。

@mixin bp($bp) {

    @if $desktop-only {

        @content;

    }

    @else {

        @include media($bp) {

            @content;

        }

    }

}

在我的 ie.scss 文件(由 Compass 使用)中，我将 $desktop-only 变量设置为 true。这会删除媒体查询本身，并简单地将查询中的属性放入其中。因为它们的顺序稍后出现在编译的 CSS 中，所以它优先于仅移动设置，然后 IE 使用该样式。

这会导致 CSS 文件稍微臃肿，但这是值得的，因为不需要额外的脚本来使其呈现桌面版本。

Answer 1

我自己为此编写了一个解决方案。您所需要的只是两个不同的 CSS 文件(一个用于现代浏览器，一个用于旧版 IE 浏览器)和一个 cleaver mixin。

创建第二个 SASS 文件，Compass 可以监视该文件并调用该文件，例如 oldIE.scss。将原始 SASS 文件(styles.scss 或其他文件)中的所有导入复制到此文件。然后在它们中添加一个新变量:$compile-IE。像这样设置值:

样式.scss

$compile-IE: false;

@import "all your other imports"

旧IE.scss

$compile-IE: true;

@import "all your other imports"

Compass 现在将为您创建两个不同的 CSS 文件。您可以将它们放置在标记的 HEAD 中，如下所示:

<link type="text/css" href="styles.css" rel="stylesheet" media="all" />
<!--[if (gte IE 6) & (lte IE 8)]>
<link type="text/css" href="oldIE.css" rel="stylesheet" media="all" />
<![endif]-->

一旦你有了这两个文件，你就可以开始使用断点编写 SASS 了，这要归功于以下 mixin:

// ----- Media-queries ----- // 
$breakpoints: S 480px, M 600px, L 769px;

@mixin bp($bp) {
// If compile-IE is true (IE8 <=) then just use the desktop overrides and parse them without @media queries
   @if $compile-IE {
      @content;
   }
   // If compile-IE is false (modern browsers) then parse the @media queries
   @else {
      @each $breakpoint in $breakpoints {
         @if $bp == nth($breakpoint, 1) {
            @media (min-width: nth($breakpoint, 2)) {
               @content;
            }
         }
      }
   }
}

按如下方式调用 mixin:

p {
   color: blue;
   font-size: 16px;
   @include bp(L) {
     font-size: 13px;
   }
}

现在，如果变量 $compile-IE 为 false(对于现代浏览器)，输出将是这样的:

p {
  color: blue;
  font-size: 16px; }
  @media (min-width: 768px) {
    p {
       font-size: 13px; 
  } 
}

当变量 $compile-IE 为 true(对于较旧的 IE 版本)时，输出将是这样的:

p {
  color: blue;
  font-size: 16px;
  font-size: 13px; 
}

由于 font-size: 13px 是在 font-size: 16px 之后解析的，因此用于较大视口(viewport)(如 bp L)的样式将覆盖默认的移动设备造型。

希望这对您有帮助! :)