CSSでスケーリングコードを実行しています(JavaScriptがそこにあるので依存しません)ので、幅/高さの比率はすべてのサイズで同じです。現在サポートされているすべてのブラウザで動作しますが、IE11はメディアのクエリを完全に無視しているようです。私はしかし、私はこのためにメディアクエリを必要としなかった以下のコメントで指摘したように: -IE11は@mediaクエリのビューポートユニットを認識できません
出力$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;
}
}
良いニュースは、メディアクエリが必要ないということです。それはあなたがそれらを削除する場合、すべてのブラウザで同じ方法で動作します。 'body {...'スタイルをメインスタイルブロックに入れてください。 –
Doh - それは良いニュースですが、悪いニュースは、ネストされた位置のために同じ能力が必要だということです。固定フッタとフォントスケーリングの場合、幅が空白になっている場合は幅を考慮する必要があります。ボトム... – Rycochet