css新闻媒体查寻有1个 宽高比很便捷，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⑴ {
.width(8*@convert);
}
.star⑵ {
.width(21*@convert);
}
.star⑶ {
.width(29*@convert);
}
.star⑷ {
.width(42*@convert);
}
.star⑸ {
.width(50*@convert);
}
.star⑹ {
.width(63*@convert);
}
.star⑺ {
.width(71*@convert);
}
.star⑻ {
.width(84*@convert);
}
.star⑼ {
.width(92*@convert);
}
.star⑴0 {
.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⑴ {
.width(8*@convert);
}
.star⑵ {
.width(21*@convert);
}
.star⑶ {
.width(29*@convert);
}
.star⑷ {
.width(42*@convert);
}
.star⑸ {
.width(50*@convert);
}
.star⑹ {
.width(63*@convert);
}
.star⑺ {
.width(71*@convert);
}
.star⑻ {
.width(84*@convert);
}
.star⑼ {
.width(92*@convert);
}
.star⑴0 {
.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;
}
}
}
}
留意3点：
1、宽高比1定是比值的方式，不可以立即写小数，宽/高
2、在less中立即写宽高比也不容易起效，由于less会编译程序成小数，能够在比值前面加1个 ~ 完善处理
3、防止款式遮盖，最好是把大占比的新闻媒体查寻写在后边
总结
以上所述是网编给大伙儿详细介绍的css 新闻媒体查寻 aspect-ratio less 应用方式,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！
Copyright © 2002-2020 微信公众号平台小程序_微信打分小程序_小程序发布_小程序大全_微信小程序编程 版权所有 （网站地图） 粤ICP备10235580号