移动适配
rem适配
-
媒体查询
-
作用
- 能够检测视口的宽度，然后编写差异化的 CSS 样式
- 当某个条件成立, 执行对应的CSS样式
-
写法
- @media (媒体属性）{选择器{css属性}}
-
-
flexible
-
手淘团队的移动适配方案
-
引入链接
<script src="../js/flexible.js"></script>- 引入flexible.js 把屏幕尺寸的1/10设置给html根字体大小，实现大屏幕设置大一点的font-size 小屏幕小一点的font-size 从而设置相同的rem值，达到适配效果
-
-
适配原理
-
确定设计稿对应的设备的HTML标签字号
-
查看设计稿宽度
-
确定参考设备宽度(视口宽度)
- 根据不同的视口宽度, 设置不同的根字号
-
确定基准根字号(HTML标签字号)
- 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10
-
-
rem单位的尺寸的计算
- px单位数值 / 基准根字号
-
-
注意点
- 在有HTML根标签文字大小时rem单位根据根字体大小计算结果
- 没有设置根字体大小时rem单位根据谷歌默认字体大小16px计算结果
vw / vh适配
-
使用
- 安装VScode插件 px to vw后可设置快捷键和视口宽度快速将px单位转换成vw单位
-
单位
- 相对单位
- vw
- vh
-
计算方式
-
相对视口的尺寸计算结果
-
vw单位尺寸
- px单位数值 / （1/100 视口宽度）
-
vh单位尺寸
- px单位数值 / （1/100 视口高度）
-
-
-
注意点
-
vw和vh单位不可混用
-
开发中多以vw为主
-
vh不经常使用的原因
- 全面屏视口高度尺寸大，混用可能会导致盒子变形
-
vw适配与rem适配的区别
-
vw
- 省去各种判断和修改
- 未来的发展趋势
-
rem
- 市场比较常见
- 需要不断修改html文字大小
- 需要媒体查询media
- 需要 flexible.js
less语法糖
css预处理语言
-
由于浏览器不认识less文件，所以我们要对less文件做一个预处理操作，less编译成浏览器能够看懂的css文件。最后我们在html文件中引入的还是css文件
-
常见
- less
- sass,scss
- stylus
语法糖
- 糖衣语法
- 便于开发者进行快速开发的语法规则
- 按照语法糖去进行开发，可以让代码变得更加有逻辑，复用性更强，减少出错的概率
编译
- easy less插件
- 在保存时可以在同级目录自动生成一个同名的css文件
注释
-
单行注释
-
用法
- //
- ctrl + /
-
注意点
- 无法被编译到css文件
-
-
多行注释
-
用法
- shift + alt + a
-
注意点
- 可以被编译到css文件
-
计算
嵌套
-
举例
/* less文件*/
.box {
.son{
width: 100px;
&:hover {
color: #00a;
}
}
}
/* css文件*/
.box .son {
width: 100px;
}
.box .son:hover{
color: #00a;
}
-
&可以去掉后代选择器的空格
- 多应用于伪类、伪元素选择器
变量
-
语法
-
@自定义的变量名：值；
-
举例
- @theme_color: #0a0;
-
-
注意点
- 变量结尾一定要有分号（;）
- 调用变量的时候也要带有分号
- 定义变量一般会写在整个文档的顶部
导入
-
语法
-
@import "需要引入的less文件路径"；
-
注意点
- 和变量语法极其相似，注意区分
- import后面是空格，不是冒号
- 导入文件只能是less文件，如果路径有误，则无法编译
- 后缀名.less可省略
- 当A.less文件导入了B.less文件，如果修改了B.less文件，则需要重新保持A.less文件，B.less文件中修改的样式才会被编译到A.css文件中
-
导出
-
语法
//out:../css/
-
禁止导出
//out:false
-
注意点
- 导出和禁止导出代码只能写在第一行
- 只能以单行注释的方式出现
css压缩
-
语法
//compress:true
-
作用
- 把输出的css文件进行压缩（去掉多余的换行空格及分号）
- 减少css文件的体积
sourceMap
-
语法
//sourceMap:true
-
作用
- 希望浏览器提示出less的行号
导出，css压缩，sourceMap的连写
//compress:true,out:../css/,sourceMap:true
单位
相对单位
-
举例
-
em
- 参考当前容器的文字大小
-
rem
- 参考根标签（HTML标签）的文字大小
-
%
-
绝对单位
-
举例
- px
- s
- ms
-
写死的值，无法再作改变
\
