画布 1
移动web第五天
  全天目标
    使用rem布局方案，实现视口宽度不同，网页元素宽高等比缩放效果
  rem
    目标
      实现在不同宽度的设备中，网页元素尺寸等比缩放效果
    学习内容
      rem介绍
        相对单位，相对于HTML标签字号计算尺寸
        1rem = 1HTML标签字号
      基本使用
        1. 给HTML标签添加字号
        2. 设置元素尺寸为rem单位
      媒体查询基本使用
        视口不同，添加不同的根字号
        @media (视口宽度) {
差异化CSS样式
}
      rem布局流程
        1. 媒体查询添加根字号
          @media (视口宽度) {
html {
font-size: 37.5px;
}
}
        2. flexible添加根字号
          <script src="flexible.js"></script>
  less
    目标
      掌握Less常用语法
    学习内容
      less介绍
        CSS预处理器，让CSS具备逻辑和计算能力
        浏览器和网页不识别less，目前需要将less文件导出CSS文件，HTML引入CSS文件
      插件
        EasyLess
      语法
        注释
          单行
            // 注释内容
            ctrl + /
          块
            /* 注释内容 */
            alt + shift + A
        嵌套
          作用
            生成后代选择器
          写法
            父选择器 {
子选择器{}
}
            &
              表示当前选择器， 不会生成后代选择器
        运算
          作用
            完成常用数学计算
          写法
            除法
              (xx / xx)
              xx ./ xx
        变量
          作用
            存储数据，方便修改和使用
          用法
            1. 定义变量
              @变量名: 值;
            2. 使用变量
              CSS属性: @变量;
        导入
          作用
            引入其他less文件
          写法
            @import: ‘文件及路径’;
        导出
          导出CSS文件
            控制所有Less导出路径
              修改EasyLess插件
                1. 设置 → 搜索easy → 在settings.json中编辑
                2. 添加代码："out": "目标存储路径"（文件夹以/结束）
            单独控制某个Less文件导出路径
              less文件第一行添加 // out：路径
          禁止导出CSS文件
            less文件第一行添加： // out: false