移動端前端設計的基礎知識

像素：一個像素就是計算機屏幕所能顯示一種特定顏色的最小區域。 這是像素的概念，實際上，在web前端開發領域，像素有如下兩層含義：
一、設備像素：設備屏幕的物理像素，對於任何設備來說物理像素的數量是固定的。
二、CSS像素：這是一個抽象的像素概念，它是爲web開發者創造的。

css像素是可變的，當放大或者縮小屏幕大小時，實際改變的是css像素的大小。
設備像素是固定的，他的大小和數量在一個設備上是固定的。

設備像素比（Device Pixel Ratio 簡稱：DPR）：
公式成立的大前提：（縮放比例爲1，即：沒有縮放css像素）
設備像素比 = 設備像素個數 / 理想視口CSS像素個數(device-width)

視口（viewport）
一、佈局視口：移動端CSS佈局的依據視口，即CSS佈局會根據佈局視口來計算。
可經過如下方式來獲取佈局視口的寬度和高度
document.documentElement.clientWidth
document.documentElement.clientHeight
二、視覺視口：用戶瀏覽的區域
三、理想視口：理想的佈局視口
能夠經過如下方式告訴手機瀏覽器把佈局視口設爲理想視口
<meta name="viewport" content="width=device-width" />
meta視口標籤存在的主要目的是爲了讓佈局視口和理想視口的寬度匹配
其中 content 屬性是一個字符串值，字符串是由逗號「，」分隔的 名/值 對組成，共有5個：
一、width：設置佈局視口的寬
二、init-scale：設置頁面的初始縮放程度
三、minimum-scale：設置了頁面最小縮放程度
四、maximum-scale：設置了頁面最大縮放程度
五、user-scalable：是否容許用戶對頁面進行縮放操做
咱們常用的是：
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">

 

以上內容是參考瞭如下知識的，詳細知識可訪問如下連接：

一、http://hcysun.me/2015/10/16/%E4%B8%80%E7%AF%87%E7%9C%9F%E6%AD%A3%E6%95%99%E4%BC%9A%E4%BD%A0%E5%BC%80%E5%8F%91%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%87%E7%AB%A0%28%E4%B8%80%29/

二、viewport：http://www.cnblogs.com/2050/p/3877280.html

三、http://www.css88.com/archives/5975