SASS 3.2媒体查询和Internet Explorer支持 [英] SASS 3.2 Media Queries and Internet Explorer Support

问题描述

我最近实施了此技术与SASS 3.2使用 @content 阻止在我一直在努力的项目，我刚刚到了点，我需要包括支持旧的浏览器，如IE7和8。

I recently implemented this technique with SASS 3.2 using @content blocks on a project I've been working on, and I've just gotten to the point where I need to include support for older browsers such as IE7 and 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样式表加载它们：

They both don't support media queries, and I've often handled this in the past by serving up all styles to these browsers when I had my media queries separated into separate partial files such as _320.scss, _480.scss and in my IE stylesheet loading them like so:

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

这将加载所有样式，并始终分配IE7 - 8一个940px或任何最大宽度是）布局和样式。通过在SASS 3.2 inline中嵌套样式，它不再需要单独的部分样式表，而是完全拧紧了如何为IE加载样式。

Which would load all styles, and always assign IE7 - 8 a 940px (or whatever the max width is) layout and styles. By nesting styles in SASS 3.2 inline like this, it eliminates the need for separate partial stylesheets, but totally screws up how I load styles for IE.

任何想法或解决方案如何打击这个？我可以使用一个polyfill如respond.js强制IE使用媒体查询，但更喜欢只是服务一个非灵活的网站到IE。

Any ideas or solutions on how to combat this? I could use a polyfill such as respond.js to force IE to use media queries, but would prefer to just serve up a non-flexible site to IE.

任何想法

推荐答案

您可以为IE< 9生成单独的样式表

You can generate a separate stylesheet for IE<9 that contains everything your normal sheet has, but with flattened media queries based on a set width.

完整说明http://jakearchibald.github.com/sass-ie/ ，但基本上你有这个mixin：

Full explanation here http://jakearchibald.github.com/sass-ie/, but basically you have this 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;
        }
    }
}

this：

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

这将在 all.scss ，它将通过媒体查询编译成 all.css 。但是，您还有一个附加文件 all-old-ie.scss ：

This would be inside all.scss, which would compile down to all.css with media queries. However, you'd also have an additional file, all-old-ie.scss:

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

这只是简单地导入所有，但是平坦化媒体查询块假定宽度为65em。

That simply imports all, but flattens media query blocks given a fake width of 65em.

这篇关于SASS 3.2媒体查询和Internet Explorer支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！