Question

在css中进行缩放代码（因为它不依赖于javascript），所以宽度/高度比在所有大小都保持不变。对于所有当前支持的浏览器，它可以工作，但IE11似乎完全忽略了媒体查询 - 有没有人遇到过让它工作的方法？

使用scss轻松编码 -

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

编辑：正如下面的评论所指出的，我不需要媒体查询，但是我还有两件似乎需要它的东西 - 字体缩放需要基于高度，除非这会在下面留下空白当身体需要变成宽度时，身体会有“假”的页脚，它们会position:fixed和top添加到它们中以保持它们在正确的位置...

@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

一种解决方案是不使用最小宽度和最小高度，而是使用最小纵横比和最大纵横比。请参阅MDN。

＆＃13;

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

＆＃13;

  This is a test. Again.

＆＃13;

适用于IE9及以上版本。

我不确定你问题中的mixins是如何工作的，但我希望这个例子可以让你开始。

IE11无法识别@media查询中的视口单元

1 个答案: