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 使用方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
![基于html css实现带搜索图标的搜索框功能]("./search_ico.png)
![css简单动画之transition属性详解]("img/吃药.jpg)
