本篇文章为大家展示了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; } } } }注意三点：
1、宽高比一定是比值的形式，不能直接写小数，宽/高
2、在less中直接写宽高比也不会生效，因为less会编译成小数，可以在比值前面加一个 ~ 完美解决
3、避免样式覆盖，最好把大比例的媒体查询写在后面
上述内容就是aspect-ratio less 怎么在css 中使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
