移動WEB開發的rem佈局

目標（目錄）

1. 能夠使用rem單位

2. 能夠使用媒體查詢的基本語法

3. 能夠使用Less的基本語法

4. 能夠使用Less中的巢狀

5. 能夠使用Less中的運算

6. 能夠使用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安裝

1. 安裝node.js，網址：http://nodejs.cn/download/

   安裝就是一直點next

2. 檢查是否安裝成功，使用cmd命令（win10：window+r 開啟執行輸入cmd）——輸入“node -v”檢視版本即可

3. 基於nodejs線上安裝Less，使用cmd命令“npm install -g less”即可

4. 檢查是否安裝成功，使用cmd命令“lessc -v”檢視版本

Less的使用

先建一個字尾名為“.less”的檔案，在這個less檔案裡面書寫less語句

1. Less變數

變數是指沒有固定的值，可以改變的，因為CSS中的一些顏色和數值經常使用。

@變數名:值;

命名規則

• 必須要@為字首

• 不能包含特殊字元

• 不能以數字開頭

• 區分大小寫

例如：錯誤的變數名：@2color、@color~@#

先定義變數，然後下方某個元素使用變數

2、Less編譯

Less包含一套自定義的語法及一個解析器，使用者根據這個語法定義自己的樣式規則，這些規則最終通過解析器，編譯生成相應的CSS檔案

將less檔案，編譯成css檔案。

利用vscode less外掛，外掛名為Easy LESS。

在vxcode商店裡面搜尋Easy LESS，安裝，然後重新載入vscode，只要儲存一下less檔案，會自動生成CSS檔案。

3、Less巢狀

子元素的樣式直接寫在父元素的樣式裡面

@color:pink;

@font14: 14px;

body{

background-color: @color;

}

div{

color: @color;

font-size: @font14;

a{

color: @color;

}

}

如果遇見（交集|偽類|偽元素選擇器）

• 內層選擇器的前面沒有&符號，則它被解析為父選擇器的後代

• 如果有&符號，它就被解析為父元素自身或父元素的偽類、偽元素

less檔案內容

@color:pink;

@color1:blue;

@font14: 14px;

body{

background-color: @color;

}

div{

color: @color;

font-size: @font14;

a{

color: @color;

&:hover{

color: @color1;

}

}

&::before{

content: "";

font-size: @font14;

}

}

less編譯後的css樣式

body {

background-color: pink;

}

div {

color: pink;

font-size: 14px;

}

div a {

color: pink;

}

div a:hover {

color: blue;

}

div::before {

content: "";

font-size: 14px;

}

3、Less運算

• 乘號（*）和除號（/）的寫法

• 運算子中間左右有個空格隔開1px + 5

• 對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位

• 如果兩個值之間只有一個值有單位，運算結果就取該單位

Less檔案

@border: 5px +5;

// 若沒有空格隔開

div{

width: 200px -50;

height: (200px + 5)*2;

border: @border solid red;

background-color: #666 - #222;

}

編譯後的css樣式

div {

width: 200px -50;

height: 410px;

border: 5px 5 solid red;

/* border 的邊沒有變成10px */

background-color: #444444;

}

rem適配方案

適配目標：

1、讓一些不能等比例自適應的元素，達到當裝置尺寸發生改變的時候，等比例適配當前裝置

2、使用媒體查詢根據不同裝置按比例設定html的字型大小，然後頁面元素使用rem做尺寸單位，當html字型大小變化時，元素尺寸也會發生變化，從而達到等比例縮放的適配。

技術使用（市場主流）

技術方案1

• less

• 媒體查詢

• rem

技術方案2

• flexible.js

• rem

總結：

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佈局
### 目標（目錄）
1. 能夠使用rem單位2. 能夠使用媒體查詢的基本語法3. 能夠使用Less的基本語法4. 能夠使用Less中的巢狀5. 能夠使用Less中的運算6. 能夠使用2種rem適配方案
思考：1、頁面佈局文字能夠隨著螢幕大小的變化而變化？
​2、流式佈局和flex佈局主要針對於寬度佈局，那高度如何設定？
​3、怎麼樣讓螢幕發生變化的時候元素高度和寬度等比例縮放？
### 一、rem的基礎？
rem（root em）是一個相對單位，
類似於em，em是父元素字型大小 ，2em 相當於將父元素字型放大兩倍
程式碼演示：
```cssdiv{
​ font-size: 12px;
​ }
​ p {
​ width: 5em;
​ height: 5em;
​ /* 執行 width: 60px、height:60px */
​ background-color: aqua;
​ }
<div> <p></p></div>```


有圖為證
不同的是rem的基準是相對於html元素的字型大小
比如根元素（html）設定font-size = 12px,非根元素設定width:2em則換成px表示就是24px
程式碼演示：
```csshtml{
​ font-size: 12px;
​ }
​ p {
​ width: 6rem;
​ height: 6rem;
​ /* 執行 width: 72px、height:72px */
​ background-color: aqua;
​ }
<div> <p></p></div>```
有圖為證：

**rem的優點：** 可以通過修改html裡面的文字大小來改變頁面中的元素的大小，可以整體控制
### 二、媒體查詢
###### 什麼是媒體查詢
媒體查詢（Media Query）是CSS3新語法
- 使用@media查詢，可以針對不同的媒體型別定義不同的樣式- @media可以針對不同的螢幕尺寸設定不同的樣式- 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
媒體查詢最好從小到大寬度的書寫
###### 語法規範
```css@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：定義輸出裝置中頁面最大可見區域寬度
程式碼演示：
```css@media screen and (max-width: 600px){
​ /* 設定css樣式 */
​ body{
​ background-color: green;
​ }
​ }```
意思：在螢幕上，最大的寬度是600px ，設定body的背景顏色為綠色
max-width: 600px 小於等於600px的意思。
多個條件加and連線
###### 媒體查詢+rem實現元素動態大小變化
媒體查詢+rem實現不同裝置寬度，實現頁面元素大小的動態變化
案例：當螢幕變小時，頁面寬高變小，字型變小；當螢幕變大時，頁面寬高變大，字型變大
```css@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;
​ }```
```css<div class="top"> 購物車</div>```


###### 引入資源
當樣式比較繁多的時候，可以針對不同的媒體使用不同的stylesheets（樣式表）
即直接在link中判斷裝置的尺寸，然後引用不同的css檔案
語法規範
`
```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安裝
1. 安裝node.js，網址：http://nodejs.cn/download/
安裝就是一直點next
2. 檢查是否安裝成功，使用cmd命令（win10：window+r 開啟執行輸入cmd）——輸入“node -v”檢視版本即可
3. 基於nodejs線上安裝Less，使用cmd命令“npm install -g less”即可
4. 檢查是否安裝成功，使用cmd命令“lessc -v”檢視版本

###### Less的使用
先建一個字尾名為“.less”的檔案，在這個less檔案裡面書寫less語句
1. Less變數
變數是指沒有固定的值，可以改變的，因為CSS中的一些顏色和數值經常使用。
`@變數名:值;`
**命名規則**
- 必須要@為字首- 不能包含特殊字元- 不能以數字開頭- 區分大小寫
例如：錯誤的變數名：@2color、@color~@#
先定義變數，然後下方某個元素使用變數
2、Less編譯
Less包含一套自定義的語法及一個解析器，使用者根據這個語法定義自己的樣式規則，這些規則最終通過解析器，編譯生成相應的CSS檔案
將less檔案，編譯成css檔案。
利用vscode less外掛，外掛名為Easy LESS。
在vxcode商店裡面搜尋Easy LESS，安裝，然後重新載入vscode，只要儲存一下less檔案，會自動生成CSS檔案。
3、Less巢狀
子元素的樣式直接寫在父元素的樣式裡面
```css@color:pink;
@font14: 14px;
body{
background-color: @color;
}
div{
color: @color;
font-size: @font14;
a{
​ color: @color;
}
}```
如果遇見（交集|偽類|偽元素選擇器）
- 內層選擇器的前面沒有&符號，則它被解析為父選擇器的後代- 如果有&符號，它就被解析為父元素自身或父元素的偽類、偽元素
less檔案內容
```css@color:pink;
@color1:blue;
@font14: 14px;
body{
background-color: @color;
}
div{
color: @color;
font-size: @font14;
a{
​ color: @color;
​ &:hover{
​ color: @color1;
​ }
}
&::before{
​ content: "";
​ font-size: @font14;
}
}
less編譯後的css樣式
body {
background-color: pink;
}
div {
color: pink;
font-size: 14px;
}
div a {
color: pink;
}
div a:hover {
color: blue;
}
div::before {
content: "";
font-size: 14px;
}```


3、Less運算
- 乘號（*）和除號（/）的寫法- 運算子中間左右有個空格隔開1px + 5- 對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位- 如果兩個值之間只有一個值有單位，運算結果就取該單位
Less檔案
```css@border: 5px +5;
// 若沒有空格隔開
div{
width: 200px -50;
height: (200px + 5)*2;
border: @border solid red;
background-color: #666 - #222;
}```
編譯後的css樣式
```cssdiv {
width: 200px -50;
height: 410px;
border: 5px 5 solid red;
/* border 的邊沒有變成10px */
background-color: #444444;
}```


### rem適配方案
適配目標：
1、讓一些不能等比例自適應的元素，達到當裝置尺寸發生改變的時候，等比例適配當前裝置
2、使用媒體查詢根據不同裝置按比例設定html的字型大小，然後頁面元素使用rem做尺寸單位，當html字型大小變化時，元素尺寸也會發生變化，從而達到等比例縮放的適配。
###### 技術使用（市場主流）
**技術方案1**
- less- 媒體查詢- rem
**技術方案2**
- flexible.js- rem
總結：
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字型大小