1、less语法；2、适配方案：rem适配 rem适配

相对单位

rem

• 1rem = html的font-size大小

less语法

语法糖

• less

• sass

  • 后缀名.scss

• stylus

less

• 编译

  • easy less

  • 保存时即可编译，如果有严重的语法错误则无法编译

  • // out: ../css/

  • // out: false

    • 禁止编译

• 嵌套

  • 父选择器 { 子选择器 {

    } }

  • &可以去掉空格-伪类伪元素选择器中使用

• 导入

  • @import "less文件路径";

• 变量

  • @自定义的变量名字: 值;

• 注释

  • 单行

    • ctrl + /
    • //

  • 块注释

    • shift + alt + a
    • /* */
    • 会编译到css文件中

• 头部注释

  • 压缩

    • // compress: true

  • 禁止导出

    • // out: false

  • map地图

    • // sourceMap: true

• 计算

  • +-*/

  • 1. 除法写法

    • ./
    • （算式）

  • 2. 单位不参与运算

    • 如果有多个单位最后会取第一个单位为最终单位

适配方案

rem适配

• 1. 自己一个个写媒体查询 给不同屏幕的html设置一个不同font-size

• 2. flexible.js

  • 当375px屏幕 就会给html设置一个37.5px .... 当320px屏幕 就会给html设置一个32px....

• px to rem

  • 1. 设置中修改根字体大小 设计稿/10
  • 2. alt + Z

vw适配

XMind - Trial Version