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 參照的是螢幕。
假設：拿到的設計稿是3.75rem的。 我們有個盒子 100*50；
使用vw表示1rem。
26.6667vw=1rem;
26.67vw=26.67% 1.1041rem

理解例子

假設有一個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.67%的vw，那麼在寫程式碼的時候直接寫0.3rem就是30px了

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%);

計算