移动端适配
# 移动适配
rem 目前主流的移动端适配解决方案
vw / vh 未来趋势
# rem基本使用
1rem=1html标签字号大小
html {
font-size: 20px;
}
.box {
width: 5rem;
height: 3rem;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 媒体查询
@media (width:375px) {
html {
font-size:20px;
}
}
1
2
3
4
5
2
3
4
5
会查询电脑的分辨率是否为指定值 满足条件执行选择器
一般情况下字号的设置为宽度的1/10
# flexibl.js
淘宝开发的移动端适配js框架
# Less语法
简化css写法
Less是一个CSS预处理器，扩展了CSS与，使CSS具备一定的逻辑性、计算能力
# 基本使用
.father {
color: red;
width: (68/37.5rem);
.son {
background-color: pink;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
同名css文件会得到效果
.fater {
color: red;
width: 1.81333333rem;
}
.father .son {
background-color: pink;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 注释
\\单行注释
\* 多行注释 *\
easy-less 快捷键
# 计算
+ - width: 100+50px
* / width: (68 / 37.5rem)
# 嵌套
.father {
.son {
color: red;
&:hover {
color:black;
}
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
嵌套会生成后代选择器
&:hover伪类选择器
笔记
更方便位置切换
# 变量
- 普通负值
@color_bt: pink;
.box {
color: color_bt;
}
.father {
background-color: color_bt;
}
1
2
3
4
5
6
2
3
4
5
6
优势是可以通过变量修改所有调用的属性值
# 导入样式
@import 'base.less';
@import 'commnt.less';
1
2
2
导入less文件在一个less文件中
# 导出样式
导出至css文件夹中
- 修改插件配置
"out":"../css/" - 单独导出样式
在less文件中第一行 //out : url 可以指定名称
# 禁止导出
//out:false
# vw/vh基本使用
相对单位 ，相对视口的尺寸计算结果
vw : viewport width
vh : viewport height
1vw = 1/100视口宽度
1vh = 1/100视口高度
.box {
width: (68/3.75vw);
height: (29/6.67vw);
}
.box {
width: (68/3.75vh);
height: (29/6.67vh);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
注意 ： 不混用 vw 和 vh
因为在全面屏的影响下 不会等比例缩放
如 一块 375x667 的屏幕 在设置一个68x29的盒子vw和vh的单位后 w: (68/3.75vw) h:(29/6.67vh)
在一块全面屏 375x812 下 h = (29/6.67) x 8.12 w = (68/3.75) x 3.75 非等比例缩放
而应该都使用vm或vh h=(29/6.67)*8.12 w=(68/6.67)*8.12
编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48