SASS 3.2 媒体查询和 Internet Explorer 支持

Posted 2023-03-06

【中文标题】SASS 3.2 媒体查询和 Internet Explorer 支持

【英文标题】：SASS 3.2 Media Queries and Internet Explorer Support

【发布时间】：2012-05-24 04:28:21

【问题描述】：

我最近在我一直从事的项目中使用 @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 分配 940 像素（或任何最大宽度）的布局和样式。通过像这样在 SASS 3.2 内嵌样式中嵌套样式，它消除了对单独的部分样式表的需要，但完全搞砸了我为 IE 加载样式的方式。

关于如何解决这个问题的任何想法或解决方案？我可以使用诸如 respond.js 之类的 polyfill 来强制 IE 使用媒体查询，但我更愿意只为 IE 提供一个不灵活的网站。

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

【问题讨论】：

你找到答案了吗？我有完全相同的问题。

【参考方案1】：

我在很多工作中都使用 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 一样运行并不是一个适合所有人的解决方案，但它适合我的需求。

【讨论】：

这也可以用于@media \0screen\,screen\9 ...，它将css应用到IE8而不让它表现得像IE7（来自blog.keithclark.co.uk/wp-content/uploads/2012/11/…）

【参考方案2】：

如果您想将所有内容集中在一个屋檐下，并且对旧浏览器的访问者只有一个 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(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

【参考方案3】：

您可以为 IE

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

$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 的情况下展平媒体查询块。

【参考方案4】：

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

如果您有兴趣使用它，我还致力于将这种技术内置到流行的 breakpoint extension for Sass 中！

【参考方案5】：

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

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

或者使用@if 导入第三个 scss (_forIE.scss?)，它将覆盖您的 IE 特定样式。