rem+vw、vh+sass

rem

em:相对单位，它需要一个参考属性。
当前元素的字体大小。

rem：相对单位 root em。 参考值为：HTML根标签的font-size的值。

iPhone5 320px 上面有640个像素点。 1px=1个物理像素点 1px=2个物理像素点。 160/320 一半
iPhoneX 375px 187.5

rem布局的原理：
动态修改html根标签中的font-size值。
实现方式：
1.通过js
2.通过vw。

vm、vh

百分比布局缺点：
1.计算百分数不方便。
2.多层嵌套时使用不方便。

vw：1vw = 屏幕宽度的百分之一。
vh: 1vh = 屏幕高度的百分之一。

区别：
百分比参照的是父盒子
vw/vh 参照的是屏幕。

理解例子

假设有一个375宽的设计稿，也就是375像素（px）,里面有一个100px100px的盒子，
当然盒子占当前屏幕的实际宽高为100100
但是不同型号的屏幕宽度与像素（px）并不都是1:1的，有1:2、1:3的，我们在写页面时不可能为每一个型号写一份代码，我们只需要在不同宽度的设备中使内容等比例缩放就可以了
此时解决这个问题有两种方式：

1. 百分比
2. 使用vw
   但是百分比在多层嵌套时会很不方便，盒子的百分比一般情况下是相对于父盒子来计算的（绝对定位的盒子就是相对于有定位的祖先盒子计算的）。但是使用vw就不同了，vw：表示当前屏幕的百分之一（vw就像是一个%）

在上面的例子中375宽的百分之一为3.75（1vw=3.75）,盒子的宽为100px，那么占设计稿多大呢？
100/375=0.2667=26.67%
每一个盒子不可能都是100*100这样容易换算的值，，那么我们就要找一个中间值，使计算简单，

rem， 使1rem=100px ,这时1rem=26.67vw，那么在写代码的时候设置标签的font-size:26.67vw，里面的盒子直接使用rem

sass

css一些问题：
1.css需要书写大量冗余的代码。
2.不方便维护。
sass：作为css的一种扩展语言。它没有减少css的功能，而是在css的基础上引入了一些css原本没有的功能（变量，Mixin,运算，函数，嵌套）。

使用sass优点：
能让咱们写更少的代码，来实现更多的功能。
sass时css的扩展：就是在css基础上增添了一些新的属性
使用步骤：

• 安装插件，输入easy sass找到后安装
• 检查配置信息，在扩展设置中找到settings.json检查是否有一下信息，有就不用管了，没有就添加上，

 "easysass.formats": [
        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        },
    ],
    "easysass.targetDir": "css/" //路径

• 创建两个文件夹，css文件夹与sass文件夹，且必须是同一级
• 在sass文件夹下建一个demo.scss文件,这里面写样式保存，系统会自动在同级的css文件夹下生成一个demo.css文件和一个demo.min.css文件，这两个文件的内容与demo.css文件的内容相同，但代码书写形式不同
  【注】
  若是系统没有自动生成，可以试试，点击 文件——打开文件夹——找到css文件夹与sass文件夹的父文件夹，打开，然后在保存一下.sass文件，就会自动生成了
  1.变量
  格式：以$符号开头，跟变量名即可。

$bc:teal;

2.嵌套
在css中直接使用选择器嵌套。
有些时候需要使用父选择器，这个时候则使用 & 占位符。

属性嵌套：复合属性可以使用。

border: {
     style:solid;
     left:{
         width: 4px;
         color: #888;
     }
};

3.注释
单行注释：// 不会保留到编译后的css文件中。
多行注释：/* / 会保留到编译后的css文件，压缩文件则没有。
重要注释：/！ */ 会保留到编译后的css文件，压缩文件也会保留，一般用于版权声明。
【注】当使用多行注释时，内容不要出现特殊符号，如“{}”就不可以

混合属性关键词

格式（eg）：@mixin 可调用的名字（关键词，关键词）{......}
【注】在使用混合属性时，混合属性应写在调用样式的前面

颜色的深浅

background-color: lighten(#cc3,30%);

计算