没有脚本的 IE8 支持移动优先的最佳方式？

Posted 2023-03-06

【中文标题】没有脚本的 IE8 支持移动优先的最佳方式？

【英文标题】：Best way to support mobile first for IE8 without script?

【发布时间】：2014-06-19 08:25:28

【问题描述】：

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

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

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

出于性能和维护的考虑，我想避免使用像 respond.js 这样的脚本。

---

解决方案：

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

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

@mixin bp($bp) 

    @if $desktop-only 

        @content;

    

    @else 

        @include media($bp) 

            @content;

        

    

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

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

【问题讨论】：

如果您可以让 Sass 将您所有的全尺寸桌面样式输出到一个单独的文件中，您可以轻松地做到这一点并将该文件隐藏在条件 cmets 中，将其放置在每个其他样式表之后。 （我想如果没有预处理器，这会真的毛茸茸的......）

使用 Respond.js 可能是最好的方法。 <!--[if lt IE 9]><script src="/js/respond.min.js"></script><![endif]-->。工作完成，仅在 IE8 及更低版本中加载。与在 SASS 中进行额外处理以迎合 IE8 相比，这必须更容易（并且维护更少）。

Compiling and maintaining ie-specific stylesheets的可能重复

【参考方案1】：

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

创建第二个 SASS 文件，Compass 可以查看该文件并将该文件称为 oldIE.scss。将原始 SASS 文件（styles.scss 或其他）中的所有导入复制到此文件。然后在它们中加入一个新变量：$compile-IE。像这样设置值：

styles.scss

$compile-IE: false;

@import "all your other imports"

oldIE.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 之后解析的，所以用于较大视口的样式（如 bp L）将覆盖默认的移动样式。

希望这对您有所帮助！ :)