rem,vw,vh适配和less的使用
rem
rem介绍
- 相对单位,相对于HTML标签字号计算尺寸
- 1rem = 1HTML标签字号
基本使用
- 给HTML标签添加字号
- 设置元素尺寸为rem单位
媒体查询基本使用
- 视口不同,添加不同的根字号
- @media (视口宽度) {
差异化CSS样式 }
rem布局流程
- 媒体查询添加根字号
@media (视口宽度) {
html {
font-size: 37.5px;
}
} - flexible添加根字号
less介绍
less介绍
- CSS预处理器,让CSS具备逻辑和计算能力
- 浏览器和网页不识别less,目前需要将less文件导出CSS文件,HTML引入CSS文件
插件
EasyLess
语法
- 注释:单行 ctrl + /; 块 alt + shift + A
- 嵌套
①作用:生成后代选择器
②写法:&(表示当前选择器, 不会生成后代选择器) - 运算
① 作用:完成常用数学计算
②除法:(xx / xx); xx ./ xx - 变量
①作用:存储数据,方便修改和使用
②用法:- 定义变量:@变量名: 值;
- 使用变量:CSS属性: @变量;
- 导入
①作用:引入其他less文件
写法:@import: ‘文件及路径’; - 导出
①导出CSS文件
控制所有Less导出路径:修改EasyLess插件
②禁止导出CSS文件
less文件第一行添加: // out: false
vw / vh
vw和vh基本使用
- vw和vh为相对单位,相对视口尺寸计算结果
- 1vw = 1/100视口宽度
- 1vh = 1/100视口高度
布局流程
- 根据设计稿确定1vw尺寸
- px单位转换成vw单位尺寸(px / (1/100视口宽度))
vh弊端
- vh是相对视口高度计算尺寸
- 需要考虑全面屏,视口高度尺寸偏大