對(duì)于移動(dòng)端開(kāi)發(fā)而言，為了做到頁(yè)面高清的效果，視覺(jué)稿的規(guī)范往往會(huì)遵循以下兩點(diǎn)： 1.首先，選取一款手機(jī)的屏幕寬高作為基準(zhǔn)(現(xiàn)在一般選取iphone6的375×667)。之前項(xiàng)目中也用到過(guò)iphone5的320×568。 2.對(duì)于retina屏幕(如: dpr=2)，為了達(dá)到高清效果，視覺(jué)稿的畫(huà)布大小會(huì)是基準(zhǔn)的2倍，也就是說(shuō)像素點(diǎn)個(gè)數(shù)是原來(lái)的4倍（對(duì)iphone6而言：原先的375×667，就會(huì)變成750×1334）。

viewport（視口） 3個(gè)視口 layout viewport（布局視口）:CSS初始包含塊的尺寸。CSS中所有以百分比為單位的長(zhǎng)度都是根據(jù)它推算出來(lái)的。如果把移動(dòng)設(shè)備上瀏覽器的可視區(qū)域設(shè)為viewport的話(huà)，某些網(wǎng)站就會(huì)因?yàn)関iewport太窄而顯示錯(cuò)亂，所以這些瀏覽器就決定默認(rèn)情況下把viewport設(shè)為一個(gè)較寬的值，比如980px，這樣的話(huà)即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示了。ppk把這個(gè)瀏覽器默認(rèn)的viewport叫做 layout viewport。 可以通過(guò)document.documentElement.clientWidth來(lái)獲取。 visual viewport（視覺(jué)視口,即用戶(hù)實(shí)際看見(jiàn)的部分）：屏幕上顯示的網(wǎng)頁(yè)區(qū)域的尺寸，會(huì)被縮放影響，可以通過(guò)window.innerWidth來(lái)獲取。 ideal viewport（完美視口）:完美適配移動(dòng)設(shè)備的viewport，它的寬度等于移動(dòng)設(shè)備的屏幕寬度。有了完美視口，用戶(hù)不用縮放和拖動(dòng)網(wǎng)頁(yè)就能夠很好的進(jìn)行網(wǎng)頁(yè)瀏覽。而完美視口需要通過(guò)viewport meta標(biāo)簽來(lái)進(jìn)行相應(yīng)的設(shè)置。 像素 一個(gè)像素就是計(jì)算機(jī)屏幕能顯示一種特定顏色的最小區(qū)域。屏幕上的像素越多，同一時(shí)間你可以看到的就越多。 設(shè)備物理像素 設(shè)備屏幕的物理像素，任何設(shè)備的物理像素的數(shù)量都是固定的。他是顯示設(shè)備中一個(gè)最微小的物理部件。每個(gè)像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度。 CSS像素:px(設(shè)備獨(dú)立像素) 邏輯像素，瀏覽器使用的抽象單位(之所以叫抽象單位，是因?yàn)槠淇梢愿鶕?jù)不同的設(shè)備和不同的關(guān)系來(lái)變大變小，所以稱(chēng)為抽象單位)為Web開(kāi)發(fā)者創(chuàng)造的，在CSS和JavaScript中使用的一個(gè)抽象的層。px是相對(duì)長(zhǎng)度單位，相對(duì)的是設(shè)備物理像素(device pixel) 注意：在舊的屏幕上，當(dāng)縮放程度為100%時(shí)，一個(gè)CSS像素等于一個(gè)設(shè)備像素。但當(dāng)在高密度屏幕上，例如蘋(píng)果的視網(wǎng)膜屏幕，一個(gè)CSS像素跨越了多個(gè)設(shè)備像素。如果用戶(hù)縮小到足夠的程度，一個(gè)CSS像素會(huì)變得明顯比一個(gè)設(shè)備像素小。 舉個(gè)例子： 當(dāng)給一個(gè)元素設(shè)置width:200px時(shí)，到底會(huì)發(fā)生什么事情？ 這個(gè)width為200px的元素跨越了200個(gè)CSS像素。而200個(gè)CSS像素相當(dāng)于多少個(gè)設(shè)備物理像素取決于屏幕的特性(是否是高密度)和用戶(hù)進(jìn)行的縮放。 用戶(hù)放大得越大，一個(gè)CSS像素覆蓋的設(shè)備物理像素就越多。因此，這個(gè)元素不一定會(huì)跨越200個(gè)設(shè)備物理像素。例如：在蘋(píng)果的視網(wǎng)膜屏幕上，視網(wǎng)膜屏幕的像素密度是普通屏幕的兩倍，那么這個(gè)元素就跨越了400個(gè)設(shè)備物理像素。如果用戶(hù)放大，它將跨越更多的設(shè)備物理像素。 再比如以iphone6為例： 設(shè)備寬高為375×667，可以理解為設(shè)備獨(dú)立像素(或CSS像素)。 其dpr為2，根據(jù)上面的計(jì)算公式，其設(shè)備物理像素就應(yīng)該×2，為750×1334。

位圖像素 一個(gè)位圖像素是柵格圖像(如：png, jpg, gif等)最小的數(shù)據(jù)單元。每一個(gè)位圖像素都包含著一些自身的顯示信息(如：顯示位置，顏色值，透明度等)。 理論上：1個(gè)位圖像素對(duì)應(yīng)于1個(gè)物理像素，圖片才能得到完美清晰的展示。 在普通屏幕下是沒(méi)有問(wèn)題的，但是在retina屏幕下就會(huì)出現(xiàn)位圖像素點(diǎn)不夠，從而導(dǎo)致圖片模糊的情況。對(duì)于dpr=2的retina屏幕而言，1個(gè)位圖像素對(duì)應(yīng)于4個(gè)物理像素，由于單個(gè)位圖像素不可以再進(jìn)一步分割，所以只能就近取色，從而導(dǎo)致圖片模糊。 所以，對(duì)于圖片高清問(wèn)題，比較好的方案就是兩倍圖片(@2x)。 如：200×300(css pixel)img標(biāo)簽，就需要提供400×600的圖片。 如此一來(lái)，位圖像素點(diǎn)個(gè)數(shù)就是原來(lái)的4倍，在retina屏幕下，位圖像素點(diǎn)個(gè)數(shù)就可以跟物理像素點(diǎn)個(gè)數(shù)形成 1 : 1的比例，圖片自然就清晰了(這也解釋了之前留下的一個(gè)問(wèn)題，為啥視覺(jué)稿的畫(huà)布大小要×2？)。

屏幕尺寸 屏幕尺寸：指屏幕的對(duì)角線(xiàn)的長(zhǎng)度，單位是英寸。

設(shè)備像素比(device pixel ratio) 設(shè)備像素比簡(jiǎn)稱(chēng)為dpr，其定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系。它的值可以按下面的公式計(jì)算得到： 設(shè)備像素比 ＝ 設(shè)備物理像素 / 設(shè)備獨(dú)立像素 計(jì)算公式： 1px = (dpr)^2dp; 獲得設(shè)備像素比后，便可得知設(shè)備像素與CSS像素之間的比例。當(dāng)這個(gè)比率為1:1時(shí)，使用1個(gè)設(shè)備像素顯示1個(gè)CSS像素。當(dāng)這個(gè)比率為2:1時(shí)，使用4個(gè)設(shè)備像素顯示1個(gè)CSS像素，當(dāng)這個(gè)比率為3:1時(shí)，使用9（33）個(gè)設(shè)備像素顯示1個(gè)CSS像素。 在JavaScript中，可以通過(guò)window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr。而在CSS中，可以通過(guò)-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進(jìn)行媒體查詢(xún)，對(duì)不同dpr的設(shè)備，做一些樣式適配 為什么iPhone5是320px586px？ 就是因?yàn)槠鋎pr = 2 dpr = 2表示一個(gè)CSS像素等于4個(gè)物理像素 所以：640dp1136dp = 320px*568px

iphone5對(duì)外宣稱(chēng)的640*1136是物理像素，而我們實(shí)際開(kāi)發(fā)中用的px是邏輯像素。

DPI:打印機(jī)每英寸可以噴的墨汁點(diǎn) PPI(pixel per inch)：屏幕每英寸的像素?cái)?shù)量，即單位英寸內(nèi)的像素密度 PPI越高，像素?cái)?shù)越高，圖像越清晰。 ppi和dpi是同一個(gè)概念，Android比較喜歡使用dpi，IOS比較喜歡使用ppi。 但是可視度越低(小),系統(tǒng)默認(rèn)設(shè)置縮放比越大 Retina屏(高清屏)：dpr都是大于等于2

meta標(biāo)簽

標(biāo)簽有很多種，而這里要著重說(shuō)的是viewport的meta標(biāo)簽，其主要用來(lái)告訴瀏覽器如何規(guī)范的渲染W(wǎng)eb頁(yè)面，而你則需要告訴它視窗有多大。 手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的”視口”（viewport）中，視口可大于或小于手機(jī)屏幕的可視區(qū)域，一般手機(jī)默認(rèn)viewport大于可視區(qū)域。這樣不會(huì)破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局，用戶(hù)可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的其他部分。 設(shè)置頁(yè)面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶(hù)及縮放頁(yè)面 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1, user-scalable=no" /> 復(fù)制代碼

上述屬性基本含義：

width=device-width 用來(lái)指定 layout viewport(布局視口) 的大小,device-width 為設(shè)備的寬度。如果不指定該屬性（或者移除viewport meta標(biāo)簽），則layout viewport寬度為瀏覽器默認(rèn)值。如：iPhone為980px。

<meta name="viewport" content="width=device-width" /> 復(fù)制代碼

這樣一來(lái)layout viewport將成為ideal viewport(完美視口)，因?yàn)閘ayout viewport寬度與設(shè)備視覺(jué)視口寬度一致了。 除此之外，我們還可以通過(guò)設(shè)置initial-scale=1來(lái)實(shí)現(xiàn)ideal viewport。

<meta name="viewport" content="initial-scale=1" /> 復(fù)制代碼

initial-scale – 初始的縮放比例 minimum-scale – 允許用戶(hù)縮放到的最小比例 maximum-scale – 允許用戶(hù)縮放到的最大比例。1.0表示不縮放 user-scalable – 用戶(hù)是否可以手動(dòng)縮放,no表示不可以手動(dòng)縮放

忽略將頁(yè)面中的數(shù)字識(shí)別為電話(huà)號(hào)碼：

<meta name="format-detection" content="telephone=no" /> 復(fù)制代碼

忽略Android平臺(tái)中對(duì)郵箱地址的識(shí)別:

<meta name="format-detection" content="email=no" /> 復(fù)制代碼

給頁(yè)面設(shè)置最大寬度和最小寬度 如果在頁(yè)面中我們使用rem結(jié)合js動(dòng)態(tài)計(jì)算font-size值來(lái)實(shí)現(xiàn)多屏幕適配，這種方式可以無(wú)限適配最大和最小的終端屏幕。但是當(dāng)屏幕超過(guò)一定的尺寸以后還繼續(xù)顯示h5頁(yè)面的話(huà)會(huì)給用戶(hù)帶來(lái)不好的體驗(yàn)。因此，我們需要給頁(yè)面設(shè)置最大的寬度和最小寬度。 比如：

{max-width:640px;min-width:320px; } 復(fù)制代碼

line-height屬性的問(wèn)題 line-height 的一個(gè)主要作用是：使得文本在父級(jí)元素中垂直居中。 屬性值：

normal 默認(rèn)。設(shè)置合理的行間距。 number 設(shè)置數(shù)字，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來(lái)設(shè)置行間距。 length 設(shè)置固定的行間距。% 基于當(dāng)前字體尺寸的百分比行間距。 inherit 規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值。 lineheight屬性很有用，但是也存在一些問(wèn)題：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>lineheight</title><style type="text/css">.box{font-size: 100px;border: 1px solid red;/*line-height: 100%;*/}</style> </head> <body> <div class="box">我是超大字體</div> </body> </html> 復(fù)制代碼

從上圖，我們發(fā)現(xiàn)字體和父元素上下之間有點(diǎn)小間距。這里我們可以通過(guò)給父元素設(shè)置line-height:100%來(lái)解決這個(gè)問(wèn)題。 上下的小間距是由于line-height 與 font-size 的計(jì)算值之差造成的。當(dāng)設(shè)置為line-height 的值為100%的時(shí)候，line-height的值就等于 font-size的尺寸，此時(shí)的空白間距為0。

小知識(shí)點(diǎn) 撥打電話(huà)代碼：

<a href="tel:1234567890">打電話(huà)給:1234567890</a> 復(fù)制代碼

發(fā)短信代碼：

<a href="sms:1234567890">發(fā)短信給:1234567890</a> 復(fù)制代碼

調(diào)用手機(jī)系統(tǒng)自帶的郵件功能代碼：

<p><a href="mailto:dlut123@126.com">發(fā)電子郵件</a></p> 復(fù)制代碼

rem自適應(yīng)原理 rem是根據(jù)html的font-size大小來(lái)變化，正是基于這個(gè)出發(fā)，我們可以在每一個(gè)設(shè)備下根據(jù)設(shè)備的寬度設(shè)置對(duì)應(yīng)的html字號(hào)，從而實(shí)現(xiàn)了自適應(yīng)布局

調(diào)整html元素大小的值 有css與js兩種方式 css方式：

html { font-size: calc(100vw / 3.75); } 復(fù)制代碼

除以3.75這里是以iphone6為設(shè)計(jì)稿為標(biāo)準(zhǔn)的，100vw表示設(shè)備寬度。為了使得html的字體大小為100px，這樣我們?cè)趽Q算的時(shí)候，1px 就是0.01rem，就很方便我們計(jì)算。 js方式： 我們只需要監(jiān)聽(tīng)resize事件即可

document.documentElement.style.fontSize = document.documentElement.clientWidth/3.75 + 'px'; $(window).on('resize', function() {document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px'; }) 復(fù)制代碼

為了避免在一些手機(jī)瀏覽器上不支持calc，vm這些CSS3新屬性，在實(shí)際應(yīng)用中最好還是使用js方式。

相關(guān)參考博文：

移動(dòng)端高清、多屏適配方案

移動(dòng)前端第一彈：viewport詳解

兩個(gè)viewport的故事（第一部分）

移動(dòng)前端開(kāi)發(fā)之viewport的深入理解

深入了解viewport和px

走向視網(wǎng)膜（Retina）的Web時(shí)代

viewports剖析

利用視口單位實(shí)現(xiàn)適配布局

---

總結(jié)

以上是生活随笔為你收集整理的H5移动端开发学习总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。