開發移動端頁面
一、像素 - 什麽是像素
在web前端開發領域，像素有以下兩層含義：
-
設備像素：設備屏幕的物理像素，對於任何設備來講物理像素的數量是固定的。
-
CSS像素：這是一個抽象的像素概念，它是為web開發者創造的。
總結
-
web前端領域，像素分為設備像素和CSS像素
-
一個CSS像素的大小是可變的，比如用後縮放頁面的時候，實際上就是在縮小或放大CSS像素，而設備像素無論大小還是數量都是不變的。
二、移動端的三個視口
布局視口：移動端CSS布局的依據視口，即CSS布局會根據布局視口來計算。
可以通過以下JavaScript代碼獲取布局視口的寬度和高度：
-
document.documentElement.clientWidth -
document.documentElement.clientHeight
第二個視口：視覺視口
能看到的部分就是視覺視口
第三個視口：理想視口
理想視口，這是我們最需要關註的視口，現在我們來回顧一下我們知道了哪些視口，有兩個，分別是：布局視口，視覺視口。
手機瀏覽器要把布局視口設為理想視口：
-
<meta name="viewport" content="width=device-width" />
上面那段代碼告訴瀏覽器：將布局視口的寬度設為理想視口。
移動端的三個視口介紹完了，讓我們總結一下：
-
在PC端，布局視口就是瀏覽器窗口
-
在移動端，視口被分為兩個：布局視口、視覺視口。
-
移動端還有一個理想視口，它是布局視口的理想尺寸，即理想的布局視口。（註：理想視口的尺寸因設備和瀏覽器的不同而不同，但這對於我們來說無所謂）
-
可以將布局視口的寬度設為理想視口
三、設備像素比(DPR)
-
設備像素比(DPR) = 設備像素個數 / 理想視口CSS像素個數(device-width)
-
iPhone5的理想視口是：320*568 <==> device-width = 320，device-height = 568
-
iPhone5的設備像素比：2
設備像素比(DPR) = 設備像素個數 / 理想視口CSS像素個數(device-width)
縮放：縮小放大的是 CSS像素。
meta視口標簽存在的主要目的是為了讓布局視口和理想視口的寬度匹配
共有5個：
-
width：設置布局視口的寬
-
init-scale：設置頁面的初始縮放程度
-
minimum-scale：設置了頁面最小縮放程度
-
maximum-scale：設置了頁面最大縮放程度
-
user-scalable：是否允許用戶對頁面進行縮放操作
媒體查詢是響應式設計的基礎，他有以下三點作用：
-
檢測媒體的類型，比如 screen，tv等
-
檢測布局視口的特性，比如視口的寬高分辨率等
-
特性相關查詢，比如檢測瀏覽器是否支持某某特性（這一點不討論，因為它被目前瀏覽器支持的功能對於web開發來講很無用）
css中使用媒體查詢的語法：
@media 媒體類型 and (視口特性閥值){
// 滿足條件的css樣式代碼
}
適應所有的設備，我們應該用javascript代碼動態生成meta標簽：
let scale = 1 / window.devicePixelRatio;
document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘,‘width=device-width,initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);
rem是相對尺寸單位，相對於html標簽字體大小的單位：
如果html的font-size = 18px;
那麽1rem = 18px，需要記住的是，rem是基於html標簽的字體大小的。
1、將布局視口大小設為設備像素尺寸：
var scale = 1 / window.devicePixelRatio;
document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘,‘width=device-width,initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);
2、動態設置html字體大小：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px‘;
3、將設計圖中的尺寸換算成rem
元素的rem尺寸 = 元素的psd稿測量的像素尺寸 / 動態設置的html標簽的font-size值
開發移動端頁面