移動WEB開發的rem佈局 目標（目錄） 能夠使用rem單位 能夠使用媒體查詢的基本語法 能夠使用Less的基本語法 能夠使用Less中的嵌套 能夠使用Less中的運算 能夠使用2種rem適配方案 思考：1、頁面佈局文字能夠隨著屏幕大小的變化而變化？ 2、流式佈局和flex佈局主要針對於寬度佈局，那 ...
目標（目錄）
-
能夠使用rem單位
-
能夠使用媒體查詢的基本語法
-
能夠使用Less的基本語法
-
能夠使用Less中的嵌套
-
能夠使用Less中的運算
-
能夠使用2種rem適配方案
思考：1、頁面佈局文字能夠隨著屏幕大小的變化而變化？
2、流式佈局和flex佈局主要針對於寬度佈局，那高度如何設置？
3、怎麼樣讓屏幕發生變化的時候元素高度和寬度等比例縮放？
一、rem的基礎？
rem（root em）是一個相對單位，
類似於em，em是父元素字體大小 ，2em 相當於將父元素字體放大兩倍
代碼演示：
div{
font-size: 12px;
}
p {
width: 5em;
height: 5em;
/* 運行 width: 60px、height:60px */
background-color: aqua;
}
有圖為證
不同的是rem的基準是相對於html元素的字體大小
比如根元素（html）設置font-size = 12px,非根元素設置width:2em則換成px表示就是24px
代碼演示：
html{
font-size: 12px;
}
p {
width: 6rem;
height: 6rem;
/* 運行 width: 72px、height:72px */
background-color: aqua;
}
有圖為證：
rem的優點：可以通過修改html裡面的文字大小來改變頁面中的元素的大小，可以整體控制
二、媒體查詢
什麼是媒體查詢
媒體查詢（Media Query）是CSS3新語法
-
使用@media查詢，可以針對不同的媒體類型定義不同的樣式
-
@media可以針對不同的屏幕尺寸設置不同的樣式
-
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
媒體查詢最好從小到大寬度的書寫
語法規範
@media mediatype and|not|only (media feature){
CSS-Code;
}
-
用@media開頭 註意“@”符號 聲明媒體查詢
-
mediatype 媒體類型 屬於哪一種類型，印表機還是手機屏幕
-
關鍵字 and not only
-
media feature 媒體特征 必須要有小括弧包裹
1、mediatype 查詢類型
屬性值：
（1）all：適用於所有設備
（2）print：用於印表機和列印預覽
（3）screen：用於電腦屏幕，平板電腦，智能手機等
2、關鍵字 and|not|only
關鍵字將媒體類型或多個媒體特性連接到一起作為媒體查詢的條件
-
and：可以將多個媒體特性連接在一起，相當於“且”
-
not：排除某個媒體類型，相當於“非”
-
only：指定某個特定的媒體類型
3、媒體特性
每個媒體類型都包含各自不同的特性，根據不同的媒體類型的媒體特性設置不同的展示風格
屬性值：
width：定義輸出設備中頁面可見區域的寬度
min-width：定義輸出設備中頁面最小可見區域寬度
max-width：定義輸出設備中頁面最大可見區域寬度
代碼演示：
@media screen and (max-width: 600px){
/* 設置css樣式 */
body{
background-color: green;
}
}
意思：在屏幕上，最大的寬度是600px ，設置body的背景顏色為綠色
max-width: 600px 小於等於600px的意思。
多個條件加and連接
媒體查詢+rem實現元素動態大小變化
媒體查詢+rem實現不同設備寬度，實現頁面元素大小的動態變化
案例：當屏幕變小時，頁面寬高變小，字體變小；當屏幕變大時，頁面寬高變大，字體變大
@media screen and (min-width: 320px){{
html{
font-size: 50px;
}
}
@media screen and (min-width: 640px){
html{
font-size: 100px;
}
}
.top{
height: 1rem;
font-size: 0.5rem;
background-color: rgb(33, 192, 179);
color: grey;
}
引入資源
當樣式比較繁多的時候，可以針對不同的媒體使用不同的stylesheets（樣式表）
即直接在link中判斷設備的尺寸，然後引用不同的css文件
語法規範
<link rel="stylesheets" href="index.css" media="mediatype and|not|only (media feature)">
<link rel="stylesheets" href="index.css" media="screen and (min-width:640px)">
三、Less基礎
Less介紹
Less（Learner Style Sheets）是一門CSS擴展語言，也稱CSS預處理器
Less是一門CSS預處理語言，它擴展了CSS的動態特性。
它的CSS的語言基礎之上，引入變數、Mixin（混入）、運算以及函數等功能，大大簡化了CSS的編寫，並且降低了CSS的維護成本。
Less中文網址：http://lesscss.cn/
常見的CSS預處理器：Sass、Less、Stylus
Less安裝
-
安裝node.js，網址：http://nodejs.cn/download/
安裝就是一直點next
-
檢查是否安裝成功，使用cmd命令（win10：window+r 打開運行輸入cmd）——輸入“node -v”查看版本即可
-
基於nodejs線上安裝Less，使用cmd命令“npm install -g less”即可
-
檢查是否安裝成功，使用cmd命令“lessc -v”查看版本
Less的使用
先建一個尾碼名為“.less”的文件，在這個less文件裡面書寫less語句
-
Less變數
變數是指沒有固定的值，可以改變的，因為CSS中的一些顏色和數值經常使用。
@變數名:值;
命名規則
-
必須要@為首碼
-
不能包含特殊字元
-
不能以數字開頭
-
區分大小寫
例如：錯誤的變數名：@2color、@color~@#
先定義變數，然後下方某個元素使用變數
2、Less編譯
Less包含一套自定義的語法及一個解析器，用戶根據這個語法定義自己的樣式規則，這些規則最終通過解析器，編譯生成相應的CSS文件
將less文件，編譯成css文件。
利用vscode less插件，插件名為Easy LESS。
