一篇真正教會你開發移動端頁面的文章(一)

標籤：網站   back   str   相關   blog   工具   use   idt   大小   

一篇真正教會你開發移動端頁面的文章(一)

一 什麼是像素？
像素：一個像素就是電腦螢幕所能顯示一種特定顏色的最小地區。 這是像素的概念，實際上，在web前端開發領域，像素有以下兩層含義：

裝置像素：裝置螢幕的物理像素，對於任何裝置來講物理像素的數量是固定的。
CSS像素：這是一個抽象的像素概念，它是為web開發人員創造的。

1 web前端領域，像素分為裝置像素和CSS像素
2 一個CSS像素的大小是可變的，比如用後縮放頁面的時候，實際上就是在縮小或放大CSS像素，而裝置像素無論大小還是數量都是不變的。縮小的時候，一個css像素會變小；

一般一個css像素等於一個裝置像素scale=1，蘋果螢幕高密度一個css像素裡大概4個物理像素。當縮小頁面時，很多個css像素才對應了一個裝置像素。

 

二 三個視口
一個塊元素預設的寬度是其父元素的100%，body的寬度是html的100%；那html是基於誰的呢？
記住一句話：視口是html的父元素，所以我們稱視口為初始包含塊。 這樣你就明白了，html元素的百分比是基於視口的。

好了，移動端的三個視口介紹完了，讓我們總結一下：
1 在PC端，布局視口就是瀏覽器視窗
2 在移動端，視口被分為兩個：布局視口(680-1024px，適應pc某些網站，web開發對應的css視口)、視覺視口(眼睛看到的大小)
3 移動端還有一個理想視口，它是布局視口的理想尺寸，即理想的布局視口。（註：理想視口的尺寸因裝置和瀏覽器的不同而不同，但這對於我們來說無所謂）
4 我們的css是基於布局視口
這告訴瀏覽器把布局視口設為理想視口:<meta name="viewport" content="width=device-width"/>
width指的是布局視口的寬；device-width指理想視口的寬度；

 

三 裝置像素比（DPR：device pixel ratio）
成立前提，縮放比是1 ；
裝置像素比dpr = 裝置像素個數 / 理想視口css像素個數（device-width）

開啟瀏覽器調試工具：
1 iphone5的理想視口是：320*568 device-width：320 device-height：568
2 iphone5的裝置像素比是2
根據公式可知，iphone5的裝置像素是：640*1136；

縮放：
公式前提是縮放比是1，css像素的大小是可以變的，縮放從技術實現的角度來講，就是放大或者縮小css像素的過程，當你用雙指放大縮小頁面的時候，實際上就是放大或縮小css像素。
縮放：縮小放大的是css像素。

meta標籤：
meta標籤存在的目的主要是為了將布局視口寬設為理想視口的寬，文法如下：
<meta name="viewport" content="name=value"/>
其中content屬性是一個字串值，字串是由逗號分割的 名/值 對組成，共有5個：
1 width：設定布局視口的寬
2 init-scale：設定頁面的初始縮放程度
3 minimum-scale：設定頁面最小縮放程度
4 maximum-scale：設定頁面最大縮放程度
5 user-scalable：是否允許頁面對使用者進行縮放操作
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"/>
意思是：讓布局視口的寬度等於理想視口的寬度，頁面的初始縮放比例及最大最小縮放比例是1，不允許使用者對頁面進行縮放

媒體查詢：
媒體查詢是響應式設計的基礎，有三大特點：
1 檢測媒體的類型，比如：screen，tv等
2 檢測布局視口的特性，比如：寬 高 解析度等
3 特性相關查詢（對web開發無用）
css中使用媒體查詢的文法：
@media 媒體類型 and （視口特性閥值）{
//滿足條件的css樣式代碼
}
執行個體：
@media all and (min-width: 321px) and (max-width: 400px){
.box{
background: red;
}
}
上面代碼中，媒體類型為all，代表任何裝置，並且裝置的布局視口寬度大於等於321px且小於等於400px時，讓擁有box類的元素背景變紅。

一篇真正教會你開發移動端頁面的文章(一)