rem,vw,vh适配和less的使用

• • rem
  • less介绍
  • vw / vh

rem

rem介绍

1. 相对单位，相对于HTML标签字号计算尺寸
2. 1rem = 1HTML标签字号

基本使用

1. 给HTML标签添加字号
2. 设置元素尺寸为rem单位

媒体查询基本使用

1. 视口不同，添加不同的根字号
2. @media (视口宽度) {
   差异化CSS样式 }

rem布局流程

1. 媒体查询添加根字号
   @media (视口宽度) {
   html {
   font-size: 37.5px;
   }
   }
2. flexible添加根字号

less介绍

less介绍

1. CSS预处理器，让CSS具备逻辑和计算能力
2. 浏览器和网页不识别less，目前需要将less文件导出CSS文件，HTML引入CSS文件

插件

EasyLess

语法

1. 注释:单行 ctrl + /; 块 alt + shift + A
2. 嵌套
   ①作用：生成后代选择器
   ②写法：&（表示当前选择器， 不会生成后代选择器）
3. 运算
   ① 作用：完成常用数学计算
   ②除法：(xx / xx)； xx ./ xx
4. 变量
   ①作用：存储数据，方便修改和使用
   ②用法：
   1. 定义变量：@变量名: 值;
   2. 使用变量：CSS属性: @变量;
5. 导入
   ①作用：引入其他less文件
   写法：@import: ‘文件及路径’;
6. 导出
   ①导出CSS文件
   控制所有Less导出路径：修改EasyLess插件
   ②禁止导出CSS文件
   less文件第一行添加： // out: false

vw / vh

vw和vh基本使用

1. vw和vh为相对单位，相对视口尺寸计算结果
2. 1vw = 1/100视口宽度
3. 1vh = 1/100视口高度

布局流程

1. 根据设计稿确定1vw尺寸
2. px单位转换成vw单位尺寸（px / (1/100视口宽度)）

vh弊端

1. vh是相对视口高度计算尺寸
2. 需要考虑全面屏，视口高度尺寸偏大