溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
