能夠使用rem單位
能夠使用**查詢的基本語法
能夠使用less的基本語法
能夠使用less中的巢狀
能夠使用less中的運算
能夠使用2種rem適配方案
思考：1、頁面布局文字能夠隨著螢幕大小的變化而變化？
2、流式布局和flex布局主要針對於寬度布局，那高度如何設定？
3、怎麼樣讓螢幕發生變化的時候元素高度和寬度等比例縮放？
rem（root em）是乙個相對單位，
類似於em，em是父元素字型大小 ，2em 相當於將父元素字型放大兩倍
**演示：
div
p
不同的是rem的基準是相對於html元素的字型大小
比如根元素（html）設定font-size = 12px,非根元素設定width:2em則換成px表示就是24px
**演示：
html
p
rem的優點：可以通過修改html裡面的文字大小來改變頁面中的元素的大小，可以整體控制
什麼是**查詢
**查詢（media query）是css3新語法
**查詢最好從小到大寬度的書寫
語法規範
@media mediatype and|not|only (media feature)
屬性值：
（1）all：適用於所有裝置
（2）print：用於印表機和列印預覽
（3）screen：用於電腦螢幕，平板電腦，智慧型手機等
2、關鍵字 and|not|only
關鍵字將**型別或多個**特性連線到一起作為**查詢的條件
3、**特性
每個**型別都包含各自不同的特性，根據不同的**型別的**特性設定不同的展示風格
屬性值：
width：定義輸出裝置中頁面可見區域的寬度
min-width：定義輸出裝置中頁面最小可見區域寬度
max-width：定義輸出裝置中頁面最大可見區域寬度
**演示：
@media screen and (
max-width
: 600px)
}
max-width: 600px 小於等於600px的意思。
多個條件加and連線
**查詢+rem實現元素動態大小變化
**查詢+rem實現不同裝置寬度，實現頁面元素大小的動態變化
案例：當螢幕變小時，頁面寬高變小，字型變小；當螢幕變大時，頁面寬高變大，字型變大
@media screen and (
min-width
: 320px)
}
@media screen and (
min-width
: 640px)
}
.top
"top">
購物車
當樣式比較繁多的時候，可以針對不同的**使用不同的stylesheets（樣式表）
即直接在link中判斷裝置的尺寸，然後引用不同的css檔案
語法規範
"stylesheets" href="index.css" media="mediatype and|not|only (media feature)">`
"stylesheets" href="index.css" media="screen and (min-width:640px)">
less（learner style sheets）是一門css擴充套件語言，也稱css預處理器
less是一門css預處理語言，它擴充套件了css的動態特性。
它的css的語言基礎之上，引入變數、mixin（混入）、運算以及函式等功能，大大簡化了css的編寫，並且降低了css的維護成本。
less中文**：
常見的css預處理器：sass、less、stylus
less安裝
安裝node.js，**：
安裝就是一直點next
檢查是否安裝成功，使用cmd命令（win10：window+r 開啟執行輸入cmd）——輸入「node -v」檢視版本即可
檢查是否安裝成功，使用cmd命令「lessc -v」檢視版本
less的使用
先建乙個字尾名為「.less」的檔案，在這個less檔案裡面書寫less語句
less變數
變數是指沒有固定的值，可以改變的，因為css中的一些顏色和數值經常使用。
@變數名:值;
命名規則
例如：錯誤的變數名：@2color、@color~@#
先定義變數，然後下方某個元素使用變數
2、less編譯
less包含一套自定義的語法及乙個解析器，使用者根據這個語法定義自己的樣式規則，這些規則最終通過解析器，編譯生成相應的css檔案
將less檔案，編譯成css檔案。
利用vscode less外掛程式，外掛程式名為easy less。
3、less巢狀
子元素的樣式直接寫在父元素的樣式裡面
@color
:pink;
@font14
: 14px;
body
div}
less檔案內容
@color
:pink;
@color1
:blue;
@font14
: 14px;
body
div}
&::before
}less編譯後的css樣式
body
divdiv a
div a:hover
div::before
less檔案
@border
: 5px +5;
// 若沒有空格隔開
div
div
1、讓一些不能等比例自適應的元素，達到當裝置尺寸發生改變的時候，等比例適配當前裝置
2、使用**查詢根據不同裝置按比例設定html的字型大小，然後頁面元素使用rem做尺寸單位，當html字型大小變化時，元素尺寸也會發生變化，從而達到等比例縮放的適配。
技術使用（市場主流）
技術方案1
技術方案2
總結：1、兩種方案都存在
2、方案二更簡單
技術方案一
1、設計稿常見尺寸寬度
基本以750px為準
iphone 4.5：640px
iphone 678：750px
android：常見320px、360px、375px、384px、400px、414px、500px、720px
2、動態設定html標籤font-size大小
（1）假設設計稿時750px
（2）假設把螢幕劃分為15等份（劃分標準不一，可以20份）
（3）每乙份作為html字型大小，這裡就是50px
（4）那麼在320px裝置的時候，字型大小就是320px/15，即21.33px
3、元素大小取值方式
（1）公式：頁面元素的rem值 = 頁面元素值（px）/ （螢幕寬度 / 劃分的分數）
（2）螢幕寬度 / 劃分的份數 就是html 的font-size的大小
（3）或：頁面元素的rem值 = 頁面元素值(px) / html 的font-size字型大小
移動web開發 rem布局
rem單位 rem root em 是乙個相對單位，類似於em，em是父元素字型大小。不同的是rem的基準是相對於html元素的字型大小。比如，根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24px。根html 為 12px html 此時 ...
移動web開發之rem布局
理論基礎 什麼是rem?fontsize of the root elelment 說白了就是字型單位，是指相對於根元素的字型大小的單位。rem的優點 相對於流式布局 響應式布局等布局方式，rem更為靈活，可以根據根不同螢幕尺寸上的根元素來等比例適配。rem的基準值 根元素的字型大小 而網頁的根元素...
03 移動WEB開發 rem布局
rem root em 是乙個相對單位 and not only 關鍵字 media feature 特性，必須用小括號包含 示範 media mediatype and not only media feature media screen and max width 640px 當螢幕大於320...