CSS單位與sass入門
阿新 • • 發佈：2020-12-25
CSS單位
CSS單位
em
它是描述相對於應用在當前元素的字型尺寸，所以它也是相對長度單位。一般瀏覽器字型大小預設為16px，則2em == 32px；
如果當前元素有大小就是按照當前元素大小
rem
-
rem是相對於html字型大小而計算的。
-
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。 vw
html{
font-size:12px;
}
0.5rem=12*0.5=6px；
vw和vh
百分比佈局缺點：
1.計算百分數不方便。
2.多層巢狀時使用不方便。
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.應該使用百分比形式去表示盒子的寬高。 4.可選方案： 4.1 百分數 不好計算，特別是多個盒子巢狀時。 4.2 vw
應用
100px=1rem=比率vw
375的設計稿，100px在上面顯示，比率是100/375. 1px就是26.67vw 、
切換成手機端頁面，iphone6/7/8的螢幕，百分之百展示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> sass入門
安裝教程
第一步，在vscode中安裝easy sass
第二步，修改vscode的配置
“easysass.compileAfterSave”: true,
“easysass.formats”: [ //nested：巢狀縮排的 css 程式碼。
//expanded：沒有縮排的、擴充套件的css程式碼。
//compact：簡潔格式的 css 程式碼。
//compressed：壓縮後的 css 程式碼
{
“format”: “expanded”,
“extension”: “.css”
},
{
“format”: “compressed”,
“extension”: “.min.css”
}
],
“easysass.targetDir”: “css/” //路徑
第三步，新建一個資料夾，在資料夾中新建兩個資料夾，一個sass一個css，
