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、避免样式覆盖，最好把大比例的媒体查询写在后面
LESS 原理，一款css的预处理程序Less的使用
LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
如何将less编译成css文件__less自动编译成css的方法总结
作为css的预处理less,拥有着比css更快捷方便，扩展了css的变量、Mixin、函数等特性，使 CSS 更易维护和扩展。下面是介绍如何将less文件转换成css文件。
vscode如何将less编译到指定css目录中
使用vscode的搬砖猿，想要在vscode编辑器里面很方便的编译less文件，需要在扩展商店里面下载一款名叫Esay LESS的超好用扩展,配置我们的LESS,我们需要在.vscode文件夹中建立一个settings.json的文件
less文件转换为css文件
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。本文主要介绍less文件如何转化为css文件
less相关知识点总结
HTML和CSS不属于编程语言而是属于标记语言,很难像JS一样定义变量、编写方法、实现模块化开发等。LESS是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。
Less 变量
使用 @ 符号定义变量，变量分配使用 : 完成。声明格式：@变量名：变量值 。通常看到很多重复的相同的值，我们可以通过使用变量来避免。Less中的变量和其他编程语言一样，可以实现值的复用
移动端开发rem布局之less+媒体查询布局的原理步骤和心得
less：是一门css扩展语言，也成为css预处理器，引入了变量，mixin（混入）、运算以及函数等功能，首先写一个common.less文件，专门用于媒体查询，其中常用的屏幕大小单位有
Less导入选项
Less 提供了CSS @import CSS规则的几个扩展，以提供更多的灵活性来处理外部文件。使用 @import（reference）导入外部文件，但除非被引用
less循环和合并
Loops语句允许我们多次执行一个语句或一组语句。在Less中，mixin可以自称，与 Guard表达式和模式匹配组合使用时，这个递归mixin可以创建各种迭代/循环结构。
less的使用几个技巧
让这个box范围内的全部包进来，这样的话就完美的进行调节，再也不用到处找第几行第几个，我刚才在哪个位置给覆盖了。一看便知！小米诺基亚等公司，都有自己的主色调。如果每次加一个#e23615太麻烦，而且如果诺基亚要搞活动！
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!