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 使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
好不容易买了服务器,如果因为自己的疏忽,被黑客黑掉的话,那真的是太糟糕了! ...
作为前端开发,你还在为解决跨域而烦恼吗? 跨域怎么产生就不在细说了,详看 浏...
本文主要介绍了AmazeUI 缩略图的实现示例,分享给大家,顺便给自己留个笔记,下...
简介: Dapr 是 2019 年 10 月微软开源的可移植、事件驱动分布式运行时,它使开...
效果:标题自带序号,代码块配色,代码块左上角仿mac图标 先打开主题文件夹 文件...
根据canisue( http://caniuse.com/#search=border-radius ),border-radius兼...
现在有很多微信公众号运营活动,都有生成图片的需求,生成图片后可以发送给好友...
和webpage打交道起页面布局就一直是我关注的内容,从早期table构架页面到DIV再到...
div.titleholder { font-family: ms sans serif, arial; font-size: 8pt; width:...
十载浮沉:数字化赋能与重塑 3D 打印等非标服务型制造业的几个底层思考及展望 吾...