aspect-ratio less 怎么在css 中使用

本篇文章为大家展示了aspect-ratio less 怎么在CSS 中使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

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;      }    }  }}

注意三点：

宽高比一定是比值的形式，不能直接写小数，宽/高

在less中直接写宽高比也不会生效，因为less会编译成小数，可以在比值前面加一个  ~   完美解决

避免样式覆盖，最好把大比例的媒体查询写在后面
 

上述内容就是aspect-ratio less 怎么在css 中使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网精选频道。