IE11は@mediaクエリのビューポートユニットを認識できません

Question

CSSでスケーリングコードを実行しています（JavaScriptがそこにあるので依存しません）ので、幅/高さの比率はすべてのサイズで同じです。現在サポートされているすべてのブラウザで動作しますが、IE11はメディアのクエリを完全に無視しているようです。私はしかし、私はこのためにメディアクエリを必要としなかった以下のコメントで指摘したように： -

出力

$width: 512; 
$height: 350; 

@mixin aspect-ratio() { 
    $widthRatio: $width/$height; 
    $heightRatio: $height/$width; 

    $widthHeight: #{$widthRatio * 100}vh; 
    $heightWidth: #{$heightRatio * 100}vw; 

    /* Fix the width relative to the height */ 
    @media all and (min-width: $widthHeight) { 
     max-width: $widthHeight; 
    } 

    /* Fix the height relative to the width */ 
    @media all and (min-height: $heightWidth) { 
     max-height: $heightWidth; 
    } 
} 

body { 
    @include aspect-ratio(); 
} 

-

@media all and (min-width: 146.28571vh) { 
    body { 
     max-width: 146.28571vh; 
    } 
} 
@media all and (min-height: 68.35938vw) { 
    body { 
     max-height: 68.35938vw; 
    } 
} 

編集のコーディングを容易にするためSCSSを使用して

フォントスケーリングは幅ベースにする必要があるときにボディの下に空白を置き、position:fixedとtopが追加される「偽の」フッターがある場合を除き、高さに基づく必要があります。彼らは里にそれらを保つためにGHTの場所は...

@mixin footer-aspect-ratio() { 
    $footerHeightRatio: $height/$width; 

    $footerHeightWidth: #{$footerHeightRatio * 100}vw; 

    $footerHeightPx: #{$height}px; 

    top: calc(100vh - 3rem); 

    $footerTopMin: calc(#{$footerHeightWidth} - 3rem); 

    /* Fix the height relative to the width */ 
    @media all and (min-height: $footerHeightWidth) { 
     top: $footerTopMin; 
    } 

    /* Make sure the font can never get too short */ 
    @media all and (max-height: #{$height}px), all and (max-width: #{$width}px) { 
     bottom: 0; 
    } 
} 

と

@mixin font-scaling($font-vh: 4.5) { 
    $widthRatio: $width/$height; 
    $heightRatio: $height/$width; 

    $widthHeight: #{$widthRatio * 100}vh; 
    $heightWidth: #{$heightRatio * 100}vw; 

    $fontsizeWidthHeight: #{$font-vh}vh; 
    $fontsizeHeightWidth: calc(#{$heightRatio} * #{$font-vh}vw); 
    $fontsizeMin: #{$font-vh * $height/100}px; 

    /* Fix the width relative to the height */ 
    font-size: $fontsizeWidthHeight; 

    /* Fix the height relative to the width */ 
    @media all and (min-height: $heightWidth) { 
     font-size: $fontsizeHeightWidth; 
    } 

    /* Make sure the font can never get too short */ 
    @media all and (max-height: #{$height}px), all and (max-width: #{$width}px) { 
     font-size: $fontsizeMin; 
    } 
} 

Answer 1

一つの解決策は使用しないことです最小幅と最小高さが、分アスペクト比とmax-アスペクト比。 MDNを参照してください。 IE9にしてまで働く

html {background:white; height:100%} 
 
body {background:yellow; height:calc(100% - 16px)} 
 

 
@media all and (min-aspect-ratio: 512/350) { 
 
    body { 
 
     max-width: 146.28571vh; 
 
    } 
 
} 
 
@media all and (max-aspect-ratio: 512/350) { 
 
    body { 
 
     max-height: 68.35938vw; 
 
    } 
 
}

This is a test. Again.

。

あなたの質問のミックスインがどのように動作するはずか分かりませんが、このサンプルがあなたを始められることを願っています。