em+rem+sass

em

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

rem

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。

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

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

区别：
百分比参照的是父盒子
vw/vh 参照的是屏幕。
假设：拿到的设计稿是375px的。 我们有个盒子 100*50；
使用vw表示100px。
26.6667vw=100px;
26.67vw=26.67% 110.41px

步骤：
1.拿到一个设计稿，假设这张设计稿是宽3.75rem。
2.其中一个盒子 1rem*0.3rem。但是因为px是绝对单位，在别的移动端设备中，显示的效果就会不同。
3.应该使用百分比形式去表示盒子的宽高。

可选方案：
1 百分数 不好计算，特别是多个盒子嵌套时。
2 vw

sass

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

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

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

变量

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

// 定义了一个变量。 变量名：变量值。
$bc-color:red;
.container {
    margin: 0 auto;
    margin-top: 200px;
    width: 800px;
    height: 300px;
    // background-color: red;
    background-color:  $bc-color;
}

嵌套

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

// 如果变量嵌套在字符串中，则必须写在#{}里面。
// eg margin-#{$m-r}: 40px;
$m-r:right;
.container .button-group button {
    font-size: 24px;
    border: none;
    border-radius: 4px;
    color: #fff;
    box-shadow: 0px 5px 5px black;
    padding: 10px 20px;
    // margin-right: 40px;
    margin-#{$m-r}: 40px;
    // border-right: 1px solid;
    border-#{$m-r}: 1px solid;
}

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

注释

• 单行注释：// 不会保留到编译后的css文件中。
• 多行注释：/* */ 会保留到编译后的css文件，压缩文件则没有。
• 重要注释：/*！ */ 会保留到编译后的css文件，压缩文件也会保留，一般用于版权声明。