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 使用方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
