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

// アスペクト比は、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 {
        表示: なし;
      }
    }
  }
}