498节---------5月17日

目录

Less

• less变量
• less编译（需要插件）
• less嵌套
•  less运算

rem适配方案

• rem实际开发适配方案
• rem适配方案技术使用
• 技术方案1

---

Less

CSS扩展语言，也叫CSS预处理器。作为CSS的一种样式的扩展，它并没有较少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

它在CSS的语法基础上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像他的名称速配说的那样，Less可以让我们用更少的代码做更多的事。

• less变量
• less编译
• less嵌套
• less运算

---

less变量

变量是指没有固定的值，可以改变的。因为css中的一些颜色和数值等经常使用。

语法：@变量名：值；

注意：

• 必须以@开头
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

---

less编译（需要插件）

本质上，less包含一套自定义的语法和一个解释器，用户根据根据这些语法定义自己的样式规则，这些规则最后总会通过解析器，编译生成对应的CSS文件。

所以我们要把less文件，编译生成css文件，这样HTML页面才能使用它。

---

less嵌套

子元素的样式可以直接写到父元素里

注意：

• 遇到（交集|伪类|伪元素选择器）
  • 内层选择器的前面没有&符号，则它被解析为父选择器的后代
  • 如果有&符号，他就被解析为父元素自身或父元素的伪类
• 如：

  常规写法
  a:hover{
          color:red;
  }
  
  
  less嵌套写法
  a{
      &:hover{
              color:red;
      }
  }

---

 less运算

任何数字、颜色、变量都可以参与运算。即less提供了+-*/算术运算

注意：

• 注意*和/的写法
• 运算符左右各有个空格隔开，如“1px + 5”
• 对于两个不同的单位的值之间的运算，运算结果取第一个值的单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位

---

rem适配方案

目标：

• 让一些不能等比适应的元素，达到设备尺寸发生变化的时候，等比例适配当前设备
• 使用多媒体查询根据不同设备按照比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发上变化，从而达到等比例缩放的适配

rem实际开发适配方案

• 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）
• css中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值；

rem适配方案技术使用

• 技术方案1
  • less
  • 媒体查询
  • rem
• 技术方案2（推荐）
  • flexible.js
  • rem

---

技术方案1

• 尺寸宽度：一般情况下，以一套或两套效果图适应大部分屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，基本以750px为主

• 动态设置html标签font-size大小
  • 假设设计稿是750px
  • 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份)
  • 每一份作为html字体大小，这里就是50px,
  • 那么在320px设备的时候，字体大小为320/15就是21.33px
  • 用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
  • 比如我们以750为标准设计稿
  • 一个100*100像素的页面元素在750屏幕下，就是100 /50转换为rem 是2rem * 2 rem 比例是1比1
  • 320屏幕下，html字体大小为21.33，则2rem = 42.66px，此时宽和高都是 42.66 但是宽和高的比例还是1比1
  • 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

• 元素大小取值方法
  • 最后的公式：页面元素的rem值=页面元素值( px)/（屏幕宽度│划分的份数)
  • 屏幕宽度/划分的份数就是html   font-size的大小
  • 或者：页面元素的rem值=页面元素值( px ) / html    font-size字体大小