一、移動適配
手機的設備不同，會導致寫出來的頁面出現(xiàn)顯示大小錯誤，解決方案
rem ： 目前多數(shù)企業(yè)在用的解決方案
vw / vh：未來的解決方案
長度單位rem
屏幕寬度不同，網(wǎng)頁元素尺寸不同（等比縮放）
rem單位
相對單位
rem單位是相對于HTML標簽的字號計算結果
1rem = 1HTML字號大小
媒體查詢能夠檢測視口的寬度，然后編寫差異化的 CSS 樣式
Snipaste_2022-04-07_20-26-22.png
適配移動端過程：
1.要利用媒體查詢規(guī)定不同的屏幕寬度設置不同的根字號大??；屏幕寬度的1/10
2.頁面元素就可以使用rem相對單位，1rem=1html文字大小
rem單位尺寸
- 根據(jù)視口寬度，設置不同的HTML標簽字號
- 書寫代碼，尺寸是rem單位
2.1 確定設計稿對應的設備的HTML標簽字號
查看設計稿寬度 → 確定參考設備寬度(視口寬度) → 確定基準根字號（1/10視口寬度）
2.2 rem單位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem單位的尺寸 = px單位數(shù)值 / 基準根字號
Snipaste_2022-04-07_20-30-10.png
二、less語法
Less是一個CSS預處理器, Less文件后綴是.less
擴充了 CSS 語言, 使 CSS 具備一定的邏輯性、計算能力。
注意：瀏覽器不識別Less代碼，目前階段，網(wǎng)頁要引入對應的CSS文件。
less注釋：
單行注釋
語法：// 注釋內容
快捷鍵：ctrl + / l 塊注釋
語法：/* 注釋內容 */
快捷鍵： shift + alt + A
使用Less嵌套寫法生成后代選擇器
Snipaste_2022-04-07_20-33-03.png
less變量
把顏色提前存儲到一個容器，設置屬性值為這個容器名 l 變量：存儲數(shù)據(jù)，方便使用和修改。 l 語法：
定義變量：@變量名: 值;
使用變量：CSS屬性：@變量名;
Snipaste_2022-04-07_20-34-25.png
使用Less導入寫法引用其他Less文件
CSS：書寫link標簽
Less：導入 @import “文件路徑”;
Snipaste_2022-04-07_20-35-43.png
控制當前Less文件導出路徑
Less文件第一行添加如下代碼, 注意文件夾名稱后面添加 /
1 // out: ./css/
1 // out: ./css/common.css
禁止導出
在less文件第一行添加: // out: false
