How to use CSS media query aspect-ratio less

CSS media query has a very convenient aspect ratio, aspect-ratio, which can directly use width/height to adapt the page. The usage example is as follows:

// The aspect ratio is between (（320/50）+(728/90))/2 to fit 320*50 design style @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;
          }
        }
      }
    }
  }
}
// The aspect ratio is greater than (（320/50）+(728/90))/2. The middle value of the two sizes is suitable for 728*90. Design style @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;
      }
    }
  }
}

Note three points:

1. The aspect ratio must be in the form of a ratio. You cannot write a decimal directly. Width/Height

2. Writing the aspect ratio directly in less will not work, because less will compile it into a decimal. You can add a ~ in front of the ratio to solve it perfectly.

3. Avoid style overlays. It is best to write large proportions of media queries at the end.

Summarize

The above is the usage of CSS media query aspect-ratio less introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: How to use Maxwell to synchronize MySQL data in real time

>>: Is it true that the simpler the web design style, the better?