移動端適配

meta viewport

1. viewport的概念

移動設備上面的viewport就是設備上的屏幕用來顯示網頁的那塊區域，叫作視口，可是在默認狀況下，移動設備上的viewport是要大於瀏覽器可視區域的，由於移動設備的分辨率相對於電腦來講比較小，因此爲了能在移動設備上正常顯示那些傳統的電腦瀏覽器設計的網站，移動設備上的瀏覽器都會把本身默認的viewport設爲980px或者1024px，因此移動設備上瀏覽器會出現橫向滾動條，由於瀏覽器可視區域寬度小於viewport

1. css中的1px不是設備的1px

css中的像素只是一個抽象的單位，在不一樣設備或者不一樣環境中，css中的1px所表明的設備物理像素是不一樣的。
在早先的移動設備中，屏幕像素密度低，一個css像素確實就是一個屏幕物理像素，當後來移動設備屏幕分辨率變高，但屏幕尺寸沒有變，這時，一個css像素是等於兩個物理像素的，因此css像素至關於多少物理像素是不肯定的。

1. 三種viewport

• layout viewport:由於手機的分辨率愈來愈大，爲了讓手機顯示電腦瀏覽器的網頁正常，瀏覽器默認狀況下把viewport設爲980px或者1024px，這樣即便是那些爲桌面設計的網站也能在移動瀏覽器上正常顯示，這就是layout viewport，它的寬度能夠經過document.documentElement.clientWidth。
• visual viewport:由於layout viewport的寬度是大於瀏覽器可視區域的寬度，因此須要一個viewport表明瀏覽器可視區域的大小，這就是visual viewport，它能夠用window.innerWidth來獲取
• ideal viewport：爲移動設備單獨設計，須要一個能完美適配移動設備的viewport，不須要用戶縮放和橫向滾動條就能正常查看網站的內容

1. 利用meta viewport來控制viewport

進行移動設備開發時，將下面的代碼複製到head標籤中：

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>

該標籤可使移動設備開發時使用ideal viewport

• width=device-width: 讓當前viewport寬度等於設備的寬度
• user-scalable=no: 禁止用戶縮放
• initial-scale=1.0: 設置頁面的初始縮放值爲不縮放
• maximum-scale=1.0: 容許用戶的最大縮放值爲1.0
• minimum-scale=1.0: 容許用戶的最小縮放值爲1.0

媒體查詢

媒體查詢能夠根據用戶設備屏幕大小和橫向或縱向來提供不一樣的樣式，使用方法：

• link元素中的css媒體查詢:

<link rel="stylesheet" media="(max-width=800px)" href="example.css" >

• 樣式表中的css媒體查詢

@media (max-width: 600px) {

}

能夠根據自定義條件來設置媒體的樣式

• 動態rem

要保持頁面佈局按照比例佈局
什麼是rem，rem是相對尺寸單位，相對於html標籤字體大小的單位
因此咱們經過用js來控制html標籤的font-size值:

document.documentElement.style.fontSize = window.innerWidth / 10 + 'px';

使用rem，這樣保持了總體頁面的比例，不會致使頁面變形