CSSメディアクエリのアスペクト比を小さくする方法

CSS メディアクエリには非常に便利なアスペクト比、aspect-ratio があり、幅と高さを直接使用してページを調整できます。使用例は次のとおりです。

// アスペクト比は、320*50 のデザインスタイルに合うように (（320/50）+(728/90))/2 の間です @media screen and (min-aspect-ratio: ~"249/50") and (max-aspect-ratio: ~"29/4"){
  @ベース: 320;
  @変換: 375/@base;
  。容器{
    幅：100vw;
    高さ:100%;
    位置:相対;
    ディスプレイ:フレックス;
    flex-flow:行を折り返さない;
    アイテムの位置を中央揃えにします。
    .info-icon-box{
      .width(46*@convert);
      .height(46*@convert);
      .border-radius(10*@convert);
      .border(1@convert,#e3e3e3);
      オーバーフロー: 非表示;
      .margin-left(10*@convert);
      .min-width(46*@convert);
      .max-width(46*@convert);
      フレックス成長: 0;
      画像 {
        幅: 100%;
        高さ: 100%;
        .border-radius(10);
        垂直方向の位置合わせ: 上;
      }
    }
    .info-その他{
      フレックス成長: 1;
      ディスプレイ:フレックス;
      flex-flow:列の折り返しなし;
      オーバーフロー: 非表示;
      高さ:100%;
      .margin-left(10*@convert);
      .info-wrap.roll-box{
        高さ:200%;
      }
      .info-box{
        幅:100%;
        高さ:50%;
        フレックス成長: 1;
        ディスプレイ:フレックス;
        flex-flow:行を折り返さない;
        アイテムの位置を中央揃えにします。
        。情報{
          幅:48vw;
          高さ: 100%;
          フレックス成長: 1;
          ディスプレイ: フレックス;
          // 項目の位置合わせ: 中央;
          flex-direction:列;
          コンテンツの中央揃え: 中央;
          .info-title{
            フォントの太さ:太字;
            .font-size(16*@convert);
            .line-height(26*@convert);
            色: #484848 ;
            .margin-bottom(4*@convert);
          }
          .info-その他のレート{
            ディスプレイ: フレックス;
            アイテムの位置を中央揃えにします。
            コンテンツの配置: flex-start;
            位置:相対;
            zインデックス:2;
            .星の数{
              .font-size(15*@convert);
              色:#4a4a4a;
              .padding-right(5*@convert);
            }
            .star-evaluate {
              位置: 相対的;
              .width(100*@convert);
              .height(16*@convert);
              背景: url("../../assets/images/star_gray.png") 繰り返しなし 0 0;
              背景サイズ: カバー;
              オーバーフロー: 非表示;
              。星 {
                位置: 絶対;
                上: 0;
                左: 0;
                表示: インラインブロック;
                .height(16*@convert);
                背景: url("../../assets/images/star.png") no-repeat 0 0;
                背景サイズ: カバー;
                オーバーフロー: 非表示;
              }
              .star-1 {
                .width(8*@convert);
              }
              .star-2 {
                .width(21*@convert);
              }
              .star-3 {
                .width(29*@convert);
              }
              .star-4 {
                .width(42*@convert);
              }
              .star-5 {
                .width(50*@convert);
              }
              .star-6 {
                .width(63*@convert);
              }
              .star-7 {
                .width(71*@convert);
              }
              .star-8 {
                .width(84*@convert);
              }
              .star-9 {
                .width(92*@convert);
              }
              .star-10 {
                .width(100*@convert);
              }
            }
          }
          .info-desc-box{
            表示: なし;
          }
        }
        .info-インストール{
          .min-width(66*@convert);
          幅:コンテンツに合わせる;
          .height(40*@convert);
          .line-height(40*@convert);
          ボックスのサイズ: 境界線ボックス;
          .padding-all(0,4*@convert,0,4*@convert);
          .font-size(14*@convert);
          色:#fff;
          テキスト配置: 中央;
          .margin-right(20*@convert);
          背景:url("../../assets/images/btn_download_short_shadow.png") 繰り返しなし 0 0;
          背景サイズ:100% 100%;
        }
      }
      .info-desc-box {
        幅:100%;
        高さ:50%;
        .padding-all(4*@convert, 26*@convert, 4*@convert, 0);
        ボックスのサイズ: 境界線ボックス;
        オーバーフロー: 非表示;
        .info-desc{
          .font-size(14*@convert);
          .line-height(20*@convert);
          色: #484848 ;
          .info-その他のレート{
            表示: なし;
          }
        }
      }
    }
  }
}
// アスペクト比は (（320/50）+(728/90))/2 より大きいです。2 つのサイズの中間の値は 728*90 に適しています。デザイン スタイル @media screen and (min-aspect-ratio: ~"29/4"){
  @ベース: 728;
  @変換: 375/@base;
  。容器{
    幅：100vw;
    高さ:100%;
    位置:相対;
    ディスプレイ:フレックス;
    flex-flow:行を折り返さない;
    アイテムの位置を中央揃えにします。
    .info-icon-box{
      .width(88*@convert);
      .height(88*@convert);
      .border-radius(10*@convert);
      .border(1@convert,#e3e3e3);
      オーバーフロー: 非表示;
      .margin-left(10*@convert);
      .min-width(88*@convert);
      .max-width(88*@convert);
      フレックス成長: 0;
      画像 {
        幅: 100%;
        高さ: 100%;
        .border-radius(10);
        垂直方向の位置合わせ: 上;
      }
    }
    .info-その他{
      フレックス成長: 1;
      ディスプレイ:フレックス;
      flex-flow:列の折り返しなし;
      オーバーフロー: 非表示;
      高さ:100%;
      .margin-left(10*@convert);
      .info-wrap{
        高さ:100%;
        .info-box{
          幅:100%;
          高さ:100%;
          フレックス成長: 1;
          ディスプレイ:フレックス;
          flex-flow:行を折り返さない;
          アイテムの位置を中央揃えにします。
          。情報{
            幅:48vw;
            高さ: 100%;
            フレックス成長: 1;
            ディスプレイ: フレックス;
            flex-direction:列;
            コンテンツの中央揃え: 中央;
            .margin-right(20*@convert);
            .info-title-rate{
              ディスプレイ: フレックス;
              flex-flow: 行の折り返しなし;
            }
            .info-title{
              フォントの太さ:太字;
              .font-size(24*@convert);
              .line-height(37*@convert);
              色: #484848 ;
              .margin-bottom(4*@convert);
            }
            .info-その他のレート{
              ディスプレイ: フレックス;
              アイテムの位置を中央揃えにします。
              コンテンツの配置: flex-start;
              位置:相対;
              zインデックス:2;
              .星の数{
                .font-size(15*@convert);
                色:#4a4a4a;
                .padding-right(5*@convert);
              }
              .star-evaluate {
                位置: 相対的;
                .width(100*@convert);
                .height(16*@convert);
                背景: url("../../assets/images/star_gray.png") 繰り返しなし 0 0;
                背景サイズ: カバー;
                オーバーフロー: 非表示;
                。星 {
                  位置: 絶対;
                  上: 0;
                  左: 0;
                  表示: インラインブロック;
                  .height(16*@convert);
                  背景: url("../../assets/images/star.png") no-repeat 0 0;
                  背景サイズ: カバー;
                  オーバーフロー: 非表示;
                }
                .star-1 {
                  .width(8*@convert);
                }
                .star-2 {
                  .width(21*@convert);
                }
                .star-3 {
                  .width(29*@convert);
                }
                .star-4 {
                  .width(42*@convert);
                }
                .star-5 {
                  .width(50*@convert);
                }
                .star-6 {
                  .width(63*@convert);
                }
                .star-7 {
                  .width(71*@convert);
                }
                .star-8 {
                  .width(84*@convert);
                }
                .star-9 {
                  .width(92*@convert);
                }
                .star-10 {
                  .width(100*@convert);
                }
              }
            }
            .info-desc-box {
              幅:100%;
              .height(20*@convert);
              .padding-all(4*@convert, 26*@convert, 4*@convert, 0);
              ボックスのサイズ: 境界線ボックス;
              オーバーフロー: 非表示;
              .info-desc{
                .font-size(14*@convert);
                .line-height(20*@convert);
                色: #484848 ;
                .info-その他のレート{
                  表示: なし;
                }
              }
              .ロールボックス{
                高さ:自動;
              }
            }
          }
          .info-インストール{
            .min-width(66*@convert);
            幅:コンテンツに合わせる;
            .height(40*@convert);
            .line-height(40*@convert);
            ボックスのサイズ: 境界線ボックス;
            .padding-all(0,4*@convert,0,4*@convert);
            .font-size(14*@convert);
            色:#fff;
            テキスト配置: 中央;
            .margin-right(20*@convert);
            背景:url("../../assets/images/btn_download_short_shadow.png") 繰り返しなし 0 0;
            背景サイズ:100% 100%;
          }
        }
      }
      &.info-desc-box {
        表示: なし;
      }
    }
  }
}

次の 3 つの点に注意してください。

1. アスペクト比は比率の形式でなければなりません。小数を直接記述することはできません。幅/高さ

2. less でアスペクト比を直接記述しても機能しません。less はそれを 10 進数にコンパイルするからです。比率の前に ~ を追加すれば、完璧に解決できます。

3. スタイルオーバーレイは避けてください。メディアクエリの大部分は最後に記述するのが最適です。

要約する

上記は、編集者が紹介した CSS メディアクエリアスペクト比レスの使用法です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。編集者がすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: Web デザインのスタイルはシンプルであればあるほど良いというのは本当でしょうか?

>>: Kubernetes コントローラーとラベルの簡単な分析