前端web-rem,vw/vh适配和less的使用

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

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. 需要考虑全面屏,视口高度尺寸偏大
上一篇:vue3学习-网易云音乐移动端


下一篇:js单位01-vh/vw