SASS 3.2媒體查詢和Internet Explorer支持

我最近使用SASS 3.2實現了this technique，使用@content塊來處理我一直在處理的項目，並且我剛剛開始支持舊版瀏覽器，例如爲IE7和8SASS 3.2媒體查詢和Internet Explorer支持

例子：

.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提供非靈活站點。

關於如何最好地組織這些文件或更好的解決方案的任何想法？

來源

2012-05-16 procload

你有沒有找到答案？我有完全相同的問題。 – orourkedd

有一個CSS3 Mixin我用它有一個IE過濾器的變量。你可以通過一個全局變量$ forIE或類似的東西來做類似的事情，將媒體查詢mixin包裝在一個if中，然後用或不帶查詢生成樣式表。

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

或者使用@if導入第三SCSS（_forIE.scss？），將覆蓋事情你的IE特定的風格。

來源

2013-01-03 14:41:56 Brian

Jake Archibald has the best technique我已經看到了實現這一目標的日期。這項技術會自動爲IE創建一個單獨的樣式表，在媒體查詢中使用所有相同的樣式，但不包含媒體查詢本身。

我還競選獲得這種技術內置於流行breakpoint extension for Sass，如果你有興趣使用！

來源

2013-01-03 14:43:20

您可以爲IE < 9單獨的樣式表，包含一切正常的片，但基於一組寬扁平媒體查詢。

這裏充分說明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的假寬度。

來源

2013-01-03 14:48:13

如果你想保持在一個屋檐下的一切，只爲您的舊版瀏覽器的訪問者在一次HTTP請求，你可以做這樣的事情

建立您最初的respondto混入

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

在這裏，如果你通過一塊薩斯（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

來源

2013-01-21 15:37:16

我用少了很多我的工作，但在大型項目中，許多人在跨文件工作，我不喜歡使用斷點文件，如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是不是適合所有人的解決方案，但它適合我的需要。

來源

2014-03-31 09:59:21 thefella

這也可以使用'@media \ 0screen \，screen \ 9 {...}'這會將css應用到IE8，而不會像IE7那樣運行（http://blog.keithclark.co.uk/可溼性粉劑內容/上傳/ 2012/11/IE-媒體 - 嵌段 - tests.php） – Luca

SASS 3.2媒體查詢和Internet Explorer支持

回答

相關問題