css中aspect,css 媒体查询 aspect-ratio less 使用方法

最新推荐文章于 2025-04-06 18:48:11 发布

weixin_39719585

最新推荐文章于 2025-04-06 18:48:11 发布

阅读量215

点赞数

文章标签： css中aspect

本文介绍了一种基于宽高比的响应式UI适配方案，通过不同屏幕比例下的样式调整，实现320*50及728*90两种设计图的自适应布局。该方案使用了媒体查询来区分不同屏幕尺寸，并定义了具体元素的样式以确保内容在不同设备上的良好显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 宽高比在((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;

}