3.基礎點的移動web

標籤：

1.移動端的螢幕適配

   在Web開發中可以使用px（像素）、em、pt（點）、in（英寸）、cm（厘米）做為長度單位，我們最常用px（像素）做為長度單位。

我們可以將上述的幾種長度單位劃分成相對長度單位和絕對長度單位。英寸是一個絕對的長度單位，像素是一個相對的長度單位。

window.devicePixelRatio ~= 物理像素/獨立像素

 

/ 擷取螢幕的物理像素尺寸

 

window.screen.width;

 

window.screen.height;

2.視口viewport；

    // 擷取viewport的大小

document.documentElement.clientWidth;

document.documentElement.clientHeight;

PC端viewport不是一個HTML結構，所以我們不能通過CSS來改變它，只是擁有了瀏覽器視窗的大小而已。

 

在行動裝置上viewport不再受限於瀏覽器的視窗，而是允許開發人員自由設定viewport的大小，通常瀏覽器會設定一個預設大小的viewport，同時為了能夠正常顯示那些專為PC設計的網頁，一般這個值的大小會大於螢幕的尺寸。

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

適配方案：

適配方案1

1、設定<meta name="viewport" content="width=device-width, initial-scale=1">

2、設定內容地區大小為320px

3、設定內容地區水平置中顯示

適配方案2

1、設定<meta name="viewport" content="width=device-width, initial-scale=1">

2、設定頁面寬度為百分比

 

適配方案3

 

1、設定<meta name="viewport" content="width=device-width, initial-scale=1">

 

2. 設定頁面元素寬度單位為 rem 或 em

 

註：此方案比較靈活，我們的案例將採用這種方案

關於em和rem

em 相對長度單位，其參照當前元素字型大小大小，如果當前元素未設定字型大小則會繼承其祖先元素字型大小大小 例如 .box {font-size: 16px;} 則 1em = 16px .box {font-size: 32px;} 則 1em = 32px，0.5em = 16px

rem 相對長度單位，其參照根項目(html)字型大小大小 例如 html {font-size: 16px;} 則 1rem = 16px html {font-size: 32px;} 則 1rem = 32px，0.5rem = 16px;  註：所有瀏覽器預設字型大小都是16px（某些安卓手機可以調置系統字型大小後，瀏覽器預設字型大小會受影響）

適配方案4

1、設定網頁寬度等於裝置物理像素

2、設定初始化縮放比例（值為1 / window.devicePixelRatio）

 

 

3.關於媒體查詢

文法格式

a) html方式

<link href="./css/phone.css" media="only screen and (min-width: 320px) and (max-width: 640px)">

 

3.基礎點的移動web