css媒體查詢aspect-ratio寬高比在less中的使用

css媒體查詢有一個 寬高比很方便，aspect-ratio ，可以直接使用寬/高 來進行頁面適配   使用樣例如下：

    // 寬高比在(（320/50）+(728/90))/2 兩個尺寸中間值以內 適配 320*50 設計圖樣式
    @media screen and (min-aspect-ratio: ~"249/50") and (max-aspect-ratio: ~"29/4"){
      @base: 320;
      @convert: 375/@base;
      .container{
        width: 100vw;
        height:100%;
        position:relative;
        display:flex;
        flex-flow:row nowrap;
        align-items: center;
        .info-icon-box{
          .width(46*@convert);
          .height(46*@convert);
          .border-radius(10*@convert);
          .border(1@convert,#e3e3e3);
          overflow: hidden;
          .margin-left(10*@convert);
          .min-width(46*@convert);
          .max-width(46*@convert);
          flex-grow: 0;
          img {
            width: 100%;
            height: 100%;
            .border-radius(10);
            vertical-align: top;
          }
        }
        .info-other{
          flex-grow: 1;
          display:flex;
          flex-flow:column nowrap;
          overflow: hidden;
          height:100%;
          .margin-left(10*@convert);
          .info-wrap.roll-box{
            height:200%;
          }
          .info-box{
            width:100%;
            height:50%;
            flex-grow: 1;
            display:flex;
            flex-flow:row nowrap;
            align-items: center;
            .info{
              width:48vw;
              height: 100%;
              flex-grow: 1;
              display: flex;
              //align-items: center;
              flex-direction:column;
              justify-content: center;
              .info-title{
                font-weight:bold;
                .font-size(16*@convert);
                .line-height(26*@convert);
                color: #484848 ;
                .margin-bottom(4*@convert);
              }
              .info-other-rate {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                position:relative;
                z-index:2;
                .star-number{
                  .font-size(15*@convert);
                  color:#4a4a4a;
                  .padding-right(5*@convert);
                }
                .star-evaluate {
                  position: relative;
                  .width(100*@convert);
                  .height(16*@convert);
                  background: url("../../assets/images/star_gray.png") no-repeat 0 0;
                  background-size: cover;
                  overflow: hidden;
                  .star {
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: inline-block;
                    .height(16*@convert);
                    background: url("../../assets/images/star.png") no-repeat 0 0;
                    background-size: cover;
                    overflow: hidden;
                  }
                  .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{
                display: none;
              }
            }
            .info-install{
              .min-width(66*@convert);
              width:fit-content;
              .height(40*@convert);
              .line-height(40*@convert);
              box-sizing: border-box;
              .padding-all(0,4*@convert,0,4*@convert);
              .font-size(14*@convert);
              color:#fff;
              text-align: center;
              .margin-right(20*@convert);
              background:url("../../assets/images/btn_download_short_shadow.png") no-repeat 0 0;
              background-size:100% 100%;
            }
          }
          .info-desc-box {
            width:100%;
            height:50%;
            .padding-all(4*@convert, 26*@convert, 4*@convert, 0);
            box-sizing: border-box;
            overflow: hidden;
            .info-desc{
              .font-size(14*@convert);
              .line-height(20*@convert);
              color: #484848 ;
              .info-other-rate{
                display: none;
              }
            }
          }
        }
      }
    }
    // 寬高比大於(（320/50）+(728/90))/2 兩個尺寸中間值 適配 728*90 設計圖樣式
    @media screen and (min-aspect-ratio: ~"29/4"){
      @base: 728;
      @convert: 375/@base;
      .container{
        width: 100vw;
        height:100%;
        position:relative;
        display:flex;
        flex-flow:row nowrap;
        align-items: center;
        .info-icon-box{
          .width(88*@convert);
          .height(88*@convert);
          .border-radius(10*@convert);
          .border(1@convert,#e3e3e3);
          overflow: hidden;
          .margin-left(10*@convert);
          .min-width(88*@convert);
          .max-width(88*@convert);
          flex-grow: 0;
          img {
            width: 100%;
            height: 100%;
            .border-radius(10);
            vertical-align: top;
          }
        }
        .info-other{
          flex-grow: 1;
          display:flex;
          flex-flow:column nowrap;
          overflow: hidden;
          height:100%;
          .margin-left(10*@convert);
          .info-wrap{
            height:100%;
            .info-box{
              width:100%;
              height:100%;
              flex-grow: 1;
              display:flex;
              flex-flow:row nowrap;
              align-items: center;
              .info{
                width:48vw;
                height: 100%;
                flex-grow: 1;
                display: flex;
                flex-direction:column;
                justify-content: center;
                .margin-right(20*@convert);
                .info-title-rate{
                  display: flex;
                  flex-flow: row nowrap;
                }
                .info-title{
                  font-weight:bold;
                  .font-size(24*@convert);
                  .line-height(37*@convert);
                  color: #484848 ;
                  .margin-bottom(4*@convert);
                }
                .info-other-rate {
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  position:relative;
                  z-index:2;
                  .star-number{
                    .font-size(15*@convert);
                    color:#4a4a4a;
                    .padding-right(5*@convert);
                  }
                  .star-evaluate {
                    position: relative;
                    .width(100*@convert);
                    .height(16*@convert);
                    background: url("../../assets/images/star_gray.png") no-repeat 0 0;
                    background-size: cover;
                    overflow: hidden;
                    .star {
                      position: absolute;
                      top: 0;
                      left: 0;
                      display: inline-block;
                      .height(16*@convert);
                      background: url("../../assets/images/star.png") no-repeat 0 0;
                      background-size: cover;
                      overflow: hidden;
                    }
                    .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 {
                  width:100%;
                  .height(20*@convert);
                  .padding-all(4*@convert, 26*@convert, 4*@convert, 0);
                  box-sizing: border-box;
                  overflow: hidden;
                  .info-desc{
                    .font-size(14*@convert);
                    .line-height(20*@convert);
                    color: #484848 ;
                    .info-other-rate{
                      display: none;
                    }
                  }
                  .roll-box{
                    height:auto;
                  }
                }
              }
              .info-install{
                .min-width(66*@convert);
                width:fit-content;
                .height(40*@convert);
                .line-height(40*@convert);
                box-sizing: border-box;
                .padding-all(0,4*@convert,0,4*@convert);
                .font-size(14*@convert);
                color:#fff;
                text-align: center;
                .margin-right(20*@convert);
                background:url("../../assets/images/btn_download_short_shadow.png") no-repeat 0 0;
                background-size:100% 100%;
              }
            }
          }
          &.info-desc-box {
            display: none;
          }
        }
      }
    }

 

注意三點：

1、寬高比一定是比值的形式，不能直接寫小數，寬/高

2、在less中直接寫寬高比也不會生效，因為less會編譯成小數，可以在比值前面加一個  ~   完美解決

3、避免樣式覆蓋，最好把大比例的媒體查詢寫在后面

參考鏈接：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries    媒體查詢

http://www.zhangyunling.com/837.html   device-aspect-ratio與aspect-ratio單屏布局

https://stackoverflow.com/questions/50465331/scss-media-query-aspect-ratio-not-working   scss中不生效