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

参考链接：

device-aspect-ratio与aspect-ratio单屏布局

scss中不生效