css 媒体查询 aspect-ratio less 使用方法

前端  /  管理员 发布于 7年前   155

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、避免样式覆盖，最好把大比例的媒体查询写在后面
 

总结

以上所述是小编给大家介绍的css 媒体查询 aspect-ratio less 使用方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！