移动端网页比例缩放，，scss入门。

相对单位

这里就先说一下rem，vw,vh。

rem

em:相对单位，它需要一个参考属性。当前元素的字体大小。
rem：相对单位 root em。 参考值为：HTML根标签的font-size的值。
rem布局的原理：

• 动态修改html根标签中的font-size值。
  实现方式：

1. 通过js
2. 通过vw。

rem想要真正实现比例缩放还是要使用vw。

vw

百分比布局缺点：

1. 计算百分数不方便。
2. 多层嵌套时使用不方便。

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

• 百分比参照的是父盒子
• vw/vh 参照的是屏幕。
  示例：
  假设：拿到的设计稿是375px的。 我们要做个可以缩放的盒子100*50
  使用vw表示100px。
  100 / 375 = 26.67
  26.67vw = 100px
  让1rem = 100px
  在来看：

1. 拿到一个设计稿，假设这张设计稿是宽3.75rem。
2. 其中一个盒子 1rem*0.3rem。但是因为px是绝对单位，在别的移动端设备中，显示的效果就会不同。
3. 应该使用百分比形式去表示盒子的宽高。
4. 可选方案：
   4.1 百分数 不好计算，特别是多个盒子嵌套时。
   4.2 vw

scss入门

css遇到的一些问题：

1. css需要书写大量冗余的代码。
2. 不方便维护。

sass：作为css的一种扩展语言。它没有减少css的功能，而是在css的基础上引入一些css原本没有的功能（变量，Mixin，运算，函数，嵌套）。

使用sass优点：
能让我们写的更少的代码，来实现更多的功能。

使用步骤：

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

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

示例：

1.变量

格式：以$符号开头，跟变量名即可。

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
 
//编译后
 
nav {
  width: 100px;
  color: #F90;
}

2.嵌套

在css中直接使用标签嵌套。
有些时候需要使用父选择器，这个时候则使用 & 占位符。
属性嵌套：复合属性可以使用；

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

如果变量嵌套在字符串，则必须写在#{ }里面。
eg： margin - #{ $m-r}：40px；
示例：

$m-r:right;
.box{
   margin-top:20px;
   margin-#{$m-r}:40px;
}
 //编译后
.box{
   margin-top:20px;
   margin-right:40px;
}

【注】属性嵌套必须是复合属性。

mixin+继承

@mixin 示例：

// 定义一个 混合。
// 参数名:默认值
@mixin boxStyle($bc, $fc:red) {
    background-color: $bc;
    p {
        color: $fc;
    }
}

.box,
.box2 {
    width: 200px;
    height: 200px;
    @include boxStyle(salmon);
    p {
        width: 100%;
        height: 100%;
        line-height: 200px;
        text-align: center;
    }
}

.box2 {
    // 继承  可以让一个选择器继承另一个选择器的所有样式。
    @extend .box;
    @include boxStyle(seagreen, tomato);
}

@extend 继承属性。

编译后显示为：

.box, .box2, .box2 {
  width: 200px;
  height: 200px;
  background-color: salmon;
}

.box p, .box2 p, .box2 p {
  color: red;
}

.box p, .box2 p, .box2 p {
  width: 100%;
  height: 100%;
  line-height: 200px;
  text-align: center;
}

.box2 {
  background-color: seagreen;
}

.box2 p {
  color: tomato;
}

注释

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

改变颜色的深浅

计算