h5 day17筆記 2021.09.07

移動端布局：

rem(相對于根元素html的font-size計算的)

視口标簽（移動端必備）<meta name="viewport" content="width=device-width, initial-scale=1.0">

螢幕尺寸：螢幕對角線的長度；

ppi：每英寸像素點的個數（蘋果手機）

dpi：每英寸像素點的個數（安卓手機）

實體像素：固定的點值，表示設計圖的大小   => ui設計師給到的值

邏輯像素：計算機中的一個坐标值 前端設定的css樣式    => 前端設定的樣式值

裝置像素比(dpr) = 實體像素 / 邏輯像素

=> 邏輯像素(未知需要設定) = 實體像素(已知) / 裝置像素比

裝置像素比:

- 設計圖是640px時候,裝置是iphone5系列寬度是320px,640px/320px = 2

- 設計圖是750px時候,裝置是iphone6\7\8系列寬度是375px,750px/375px = 2 常見的設計圖！！！

- 設計圖是1080px時候,裝置是iphone6\7\8plus+系列寬度是414px,1080px/414px = 2.67(約等于3)

第一款手機: iphone5

- 媒體查詢設定 @media all and (max-width:320px){html{font-size:12px}}

- 計算公式: 常見的設計圖為640px,dpr為2 計算公式: 實體像素/2 / 12px = ? rem

第二款手機: iphone6\7\8

- 媒體查詢設定 @media all and (min-width:321px) and (max-width:375px){html{font-size:14px}}

- 計算公式:常見的設計圖為750px,dpr為2 計算公式: 實體像素/2 / 14px = ? rem

第三款手機: iphone6\7\8 plus+

- 媒體查詢設定 @media all and (min-width:376px) and (max-width:414px){html{font-size:16px}}

- 計算公式: 常見的設計圖為1080px,dpr為3 計算公式: 實體像素/3 / 16px = ? rem

第一種方法：媒體查詢+rem

- 媒體查詢的作用是可以根據不同的裝置的寬度 設定根元素的大小

- rem機關是可以将像素值轉換為可以進行計算變化的值

- 優點:好了解 簡單；

- 缺點:有多少裝置就需要設定多少個媒體查詢、計算麻煩有誤差；

第二種方法: vw (viewport width)    視口寬度 1vw相等于目前視口的百分之一

（在pc端的時候 滾動條是占位置的 是以100vw和100%不相等，建議在移動端使用）

vw實作移動端布局的思路推算：

1） 100vw相當于和ui設計圖的大小是一樣的 1vw就是設計圖的百分之一

2） 100vw / 設計圖的大小 = 每一份大小

3） 得到的每一份是px機關 如何把像素轉換為rem

常見的設計圖750px，dpr為2，則：

1）750px / 2 = 375px

2） 375px = 100vw

3） 1vw = 3.75px

4） 1px = 0.2667vw

設定    html{font-size:0.2667vw}      --每次自動乘以0.2667vw