當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

移动端像素概念，viewport，适配

發(fā)布時(shí)間：2025/3/21 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了移动端像素概念，viewport，适配小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

想必大家對(duì)移動(dòng)端像素的概念比較疑惑，總結(jié)一下我們經(jīng)常會(huì)聽到的幾個(gè)詞。

一、屏幕尺寸

平時(shí)我們通常提到手機(jī)的尺寸，比如iPhone6是4.7英寸的。手機(jī)的屏幕是以英寸為單位的。我們平時(shí)使用最多的單位是：毫米、厘米、米。對(duì)于英寸并不熟悉，首先我們先來(lái)?yè)Q算一下單位：1英寸（inch）=2.54厘米（cm）。那么，英寸到底表示的是什么呢？是手機(jī)的寬還高？原來(lái)英寸代表的意思是：手機(jī)屏幕對(duì)角線的長(zhǎng)度。

常見的屏幕尺寸有：2.4、2.8、3.5、3.7、4.2、5.5、5.6等

二、屏幕分辨率

指在橫縱向上的像素點(diǎn)數(shù)，單位是px。1px=1個(gè)像素點(diǎn)數(shù)（注：這里的像素指的是物理設(shè)備的1個(gè)像素）。

一般以縱向像素 * 橫向像素表示一個(gè)手機(jī)的分辨率。比如：1980*1080

在同一個(gè)設(shè)備上，它的像素個(gè)數(shù)是固定的，這是廠商在出廠時(shí)就設(shè)置好了的。只有不同的設(shè)備之間，才有像素大小的區(qū)別。

這里有人提出一個(gè)問題：既然在同一個(gè)設(shè)備上，像素點(diǎn)數(shù)早就設(shè)定好了，那電腦上可以調(diào)整分辨率是怎么回事？

其實(shí)，當(dāng)我們調(diào)整電腦分辨率的時(shí)候，無(wú)論怎么調(diào)，像素點(diǎn)數(shù)還是那么多。

入上圖我的電腦所示，系統(tǒng)推薦的是1920x1080 px的分辨率，這表示什么意思呢？剛才我們也提到了，微軟在這塊屏幕上橫向設(shè)置了1080個(gè)像素，豎向設(shè)置了1920個(gè)像素。無(wú)論怎么調(diào)整，這個(gè)數(shù)字是不會(huì)變了。那么，為什么我們還能調(diào)整分辨率呢？比如我們調(diào)整到1336x760，按照定義，橫向就是760個(gè)像素，豎向就是1336個(gè)像素了。其實(shí)呢，你把分辨率調(diào)成1336x760，系統(tǒng)就會(huì)分配給你1336x760有效像素個(gè)數(shù)，也就是真實(shí)的色彩塊。其他的個(gè)數(shù)呢，就由系統(tǒng)自作主張，通過一系列運(yùn)算給你一個(gè)模擬色彩塊，填充成正好1920x1080 個(gè)色彩塊。這些拿來(lái)充數(shù)的像素塊，和真實(shí)的像素塊放到一起，我們不易察覺。

蘋果系列手機(jī)分辨率：

型號(hào)屏幕分辨率PPI

3GS	320x480	163
4s	640x960	326
5c	640x1136	326
5s	640x1136	326
6	750x1334	326
6+	1242x2208~1080x1920	401

注：屏幕大小和分辨率是沒有關(guān)系的，屏幕大的分辨率不一定。

我們知道蘋果手機(jī)是從4s開始火起來(lái)的，因?yàn)樗褂昧烁咔迤痢Ｄ敲词裁词?span style="color:#ffbb66;">高清屏呢？

三、高清屏

高清屏（Retina）的概念，主要是從喬布斯發(fā)布的Retina設(shè)備開始的，Retina顯示屏又叫做視網(wǎng)膜屏。事實(shí)上，Retnia這個(gè)詞更接近于一個(gè)營(yíng)銷名詞而非技術(shù)名次。因?yàn)閺哪撤N意義上來(lái)說，這是蘋果為宣傳自己的產(chǎn)品所創(chuàng)造出的名詞。蘋果也的確為這個(gè)名詞申請(qǐng)了專利。

主要功能：

把更多的像素點(diǎn)壓縮至一塊屏幕上，具備足夠高的物理像素密度從而使人體肉眼無(wú)法分辨其中單獨(dú)像素點(diǎn)的液晶屏。

特點(diǎn)：

一種具備超高像素密度的液晶屏。
同樣大小屏幕上顯示的像素點(diǎn)由一個(gè)變成多個(gè)。

高清屏和普通屏的區(qū)別：

高清屏（Retain）和普通屏相比，相同區(qū)域的物理像素點(diǎn)數(shù)，高清屏是普通屏的4倍。
高清屏的筆記本電腦色彩保真特點(diǎn)的全面展現(xiàn)

四、屏幕像素密度（PPI）

屏幕像素密度也叫像素密度或屏幕密度

屏幕像素密度，即屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量，英文pixels per inch，簡(jiǎn)稱PPI。這個(gè)英寸跟之前手機(jī)屏幕的尺寸一樣，也是對(duì)角線的長(zhǎng)度。所以我們可以這么理解屏幕像素密度，即在一個(gè)對(duì)角線長(zhǎng)度為1英寸的正方形內(nèi)所擁有的像素?cái)?shù)。

屏幕像素密度與屏幕尺寸和屏幕分辨率有關(guān)。他們之間有一個(gè)公式：

這個(gè)公式真是簡(jiǎn)單明了，我們還是以iPhone6手機(jī)為例，它的尺寸為4.7英寸，分辨率為750px*1334px。套用一下公式計(jì)算一下，最后得出的PPI，結(jié)果是325.6122832234167，四舍五入326和上面表格的值就一樣了。

五、物理像素（device pixels）

物理像素又稱設(shè)備像素，顧名思義，顯示屏是由一個(gè)個(gè)物理像素點(diǎn)組成的，通過控制每個(gè)像素點(diǎn)的顏色和亮度，使屏幕顯示出不同的圖像，屏幕從出廠那天，它的物理像素點(diǎn)就固定不變了，單位pt。它是顯示設(shè)備中最小的物理部件。

買手機(jī)的時(shí)候會(huì)有nxm`的分辨率，那是屏幕nxm個(gè)呈像點(diǎn)。一個(gè)點(diǎn)（小方格）為一個(gè)物理像素，它是屏幕能顯示的最小粒度。

任何設(shè)備的物理像素的數(shù)量都是固定的，任何一款設(shè)備上物理像素的大小是不會(huì)改變的。不同設(shè)備上物理像素的大小可能不同。

六、css像素

在做web頁(yè)面的時(shí)候，我們經(jīng)常為一個(gè)元素設(shè)置大小，比如：

div{width:200px;height:200px;background:pink; }

那么什么是css像素呢？

css像素是個(gè)抽象的單位，主要使用在瀏覽器上，用來(lái)精確的度量（確定）web頁(yè)面上的內(nèi)容。它是為web開發(fā)者創(chuàng)造的，在css或者JavaScript中使用的一個(gè)抽象層。一般情況下，css像素被稱為與設(shè)備無(wú)關(guān)像素（device-independent）簡(jiǎn)稱為：DIPS。在一個(gè)標(biāo)準(zhǔn)的顯示密度下，一個(gè)css像素對(duì)應(yīng)一個(gè)設(shè)備像素（物理像素）。css是一個(gè)抽象單位，因?yàn)槌氏竦臅r(shí)候需要在設(shè)備上呈像，到底呈現(xiàn)出來(lái)是什么樣子與一個(gè)css像素包含多少個(gè)物理像素有關(guān)。css像素是瀏覽器特有的概念。

物理像素與css像素的關(guān)系：

如上樣式所示：一個(gè)width為200px的元素，它占據(jù)了200個(gè)css像素，但200個(gè)css像素占據(jù)了多少個(gè)物理像素取決于屏幕的特性（是否是高密度，即像素比）和用戶的縮放行為。

如果在iPhone的視網(wǎng)膜屏上，視網(wǎng)膜的像素密度是普通屏幕的兩倍，這個(gè)時(shí)候200px個(gè)css像素就跨越了400個(gè)設(shè)備像素。如果用戶放大，它將跨越更多的設(shè)備元素。

假設(shè)我們用PC瀏覽器打開一個(gè)頁(yè)面，瀏覽器此時(shí)的寬度為1000px，頁(yè)面上同時(shí)有一個(gè)500px寬的塊級(jí)元素容器。很明顯此時(shí)塊狀容器應(yīng)該占頁(yè)面的一半。

但如果我們把頁(yè)面放大（通過“Ctrl鍵”加上“+號(hào)鍵”），放大為200%，也就是原來(lái)的兩倍。此時(shí)塊狀容器則橫向占滿了整個(gè)瀏覽器。

此時(shí)我們既沒有調(diào)整瀏覽器窗口大小，也沒有改變塊狀元素的css寬度，但是它看上去卻變大了一倍——這是因?yàn)槲覀儼袰SS像素放大為了原來(lái)的兩倍。

也就是說默認(rèn)情況下一個(gè)CSS像素應(yīng)該是等于一個(gè)物理像素的寬度的，但是瀏覽器的放大操作讓一個(gè)CSS像素等于了兩個(gè)設(shè)備像素寬度。在高PPI的設(shè)備上，CSS像素甚至在默認(rèn)狀態(tài)下就相當(dāng)于多個(gè)物理像素的尺寸。

七、設(shè)備獨(dú)立像素

設(shè)備獨(dú)立像素也稱為密度無(wú)關(guān)像素，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表可以由程序使用的虛擬像素（比如：css像素），然后由相關(guān)系統(tǒng)轉(zhuǎn)化為物理像素。是設(shè)備對(duì)接css像素的接口，一旦css像素與獨(dú)立設(shè)備像素聯(lián)系起來(lái)（width=device-width）此時(shí)像素比才能真正發(fā)揮作用。

設(shè)備獨(dú)立像素有什么用？

可以把它看成是設(shè)備提供出來(lái)的接口，它用來(lái)對(duì)接應(yīng)用的一些概念：比如瀏覽器中的css像素。只有當(dāng)瀏覽器廠商對(duì)接上獨(dú)立像素時(shí)，瀏覽器廠商設(shè)計(jì)的移動(dòng)端規(guī)則才能發(fā)揮作用。否則采用默認(rèn)的規(guī)則。

設(shè)備獨(dú)立像素在哪里能看到呢？

我們可以F12打開瀏覽器，切換到移動(dòng)端，此時(shí)，顯示的值就是設(shè)備獨(dú)立像素。

八、位圖像素

一個(gè)位圖像素是柵格圖像（比如：png、jpg 、gif）等，最小的數(shù)據(jù)單元。

一個(gè)位圖像素對(duì)應(yīng)一個(gè)物理像素，圖片才能得到完美清晰的展示。

九、設(shè)備像素比(DPR)

官方定義：設(shè)備物理像素和設(shè)備獨(dú)立像素的比例。英文：device pixels ratio也就是:

device pixels ratio = 物理像素/設(shè)備獨(dú)立像素

可以通過 window.devicePixelRatio 來(lái)獲取，比如：

console.log(window.devicePixelRatio)

在iPhonex下面結(jié)果為：3

這個(gè)比值是個(gè)具體的數(shù)，也就是說在iphoneX中，物理像素 = 3倍設(shè)備獨(dú)立像素。

在iPhone6中就不一樣了：如圖所示：

占據(jù)一塊iPhone 6的屏幕需要750x1334個(gè)物理像素。

占據(jù)一塊iPhone 6的屏幕需要375x667個(gè)設(shè)備獨(dú)立像素。

也就是說1個(gè)設(shè)備獨(dú)立像素=4倍物理像素（面積）。

所以我們可以簡(jiǎn)化成下面的表示方法：

設(shè)備像素比=一個(gè)方向上占滿一塊屏幕需要的物理像素個(gè)數(shù)/一個(gè)方向上占滿屏幕需要的設(shè)備獨(dú)立像素的個(gè)數(shù)。

當(dāng)我們寫上meta標(biāo)簽后，width=device-width 使css像素和設(shè)備獨(dú)立像素聯(lián)系了起來(lái)，即css像素等于設(shè)備獨(dú)立像素。在iPhone6下，即：

1css像素=4倍物理像素

10、像素總結(jié)

現(xiàn)在我們了解了四個(gè)像素分別是：物理像素、css像素、位圖像素和設(shè)備獨(dú)立像素。

物理像素：是設(shè)備呈現(xiàn)出的最小單元
位圖像素：是圖片的最小單元
css像素是瀏覽器上的一個(gè)抽象單位
設(shè)備獨(dú)立像素也是一個(gè)抽象的層，是設(shè)備提供出來(lái)的接口
像素比：物理像素/設(shè)備獨(dú)立像素

由于物理像素、設(shè)備獨(dú)立像素，像素比都是設(shè)備中的概念，與瀏覽器沒有關(guān)系，在設(shè)備出廠的時(shí)候這些參數(shù)都已經(jīng)固定了。所以在默認(rèn)情況下，設(shè)備獨(dú)立像素和像素比在web開發(fā)中沒有意義。

對(duì)于web開發(fā)來(lái)說，我們使用的每一個(gè)css和JavaScript定義的像素本質(zhì)上代表的都是css像素，我們?cè)陂_發(fā)中并不在意一個(gè)css像素到底跨越了多少個(gè)物理像素。我們將這個(gè)依賴于屏幕特性和用戶縮放程度的復(fù)雜運(yùn)算交給了瀏覽器。

11、視口

移動(dòng)端瀏覽器廠商面臨的問題：

他們?nèi)绾螌?shù)以萬(wàn)計(jì)甚至數(shù)以億計(jì)的PC端網(wǎng)頁(yè)完整的呈現(xiàn)在移動(dòng)端設(shè)備上？并且不會(huì)出現(xiàn)橫向滾動(dòng)條？

三個(gè)viewport的理論：

首先，移動(dòng)設(shè)備上的瀏覽器認(rèn)為自己必須能讓所有的網(wǎng)站都正常顯示，即使是那些不是為移動(dòng)設(shè)備設(shè)計(jì)的網(wǎng)站。但如果以瀏覽器的可視區(qū)域作為viewport的話，因?yàn)橐苿?dòng)設(shè)備的屏幕都不是很寬，所以那些為桌面瀏覽器設(shè)計(jì)的網(wǎng)站放到移動(dòng)設(shè)備上顯示時(shí)，必然會(huì)因?yàn)橐苿?dòng)設(shè)備的viewport太窄，而擠作一團(tuán)，甚至布局什么的都會(huì)亂掉。如果把移動(dòng)設(shè)備上瀏覽器的可視區(qū)域設(shè)為viewport的話，某些網(wǎng)站就會(huì)因?yàn)関iewport太窄而顯示錯(cuò)亂，所以這些瀏覽器就決定默認(rèn)情況下把viewport設(shè)為一個(gè)較寬的值，比如980px，這樣的話即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示了。ppk把這個(gè)瀏覽器默認(rèn)的viewport叫做 layout viewport（布局視口）這個(gè)layout viewport的寬度可以通過document.documentElement.clientWidth 來(lái)獲取。

然而，layout viewport 的寬度是大于瀏覽器可視區(qū)域的寬度的，所以我們還需要一個(gè)viewport來(lái)代表瀏覽器可視區(qū)域的大小，ppk把這個(gè)viewport叫做 visual viewport （視覺視口）。visual viewport的寬度可以通過window.innerWidth 來(lái)獲取

現(xiàn)在我們已經(jīng)有兩個(gè)viewport了：layout viewport 和 visual viewport。但瀏覽器覺得還不夠，因?yàn)楝F(xiàn)在越來(lái)越多的網(wǎng)站都會(huì)為移動(dòng)設(shè)備進(jìn)行單獨(dú)的設(shè)計(jì)，所以必須還要有一個(gè)能完美適配移動(dòng)設(shè)備的viewport。所謂的完美適配指的是，首先不需要用戶縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容；第二，顯示的文字的大小是合適，比如一段14px大小的文字，不會(huì)因?yàn)樵谝粋€(gè)高密度像素的屏幕里顯示得太小而無(wú)法看清，理想的情況是這段14px的文字無(wú)論是在何種密度屏幕，何種分辨率下，顯示出來(lái)的大小都是差不多的。當(dāng)然，不只是文字，其他元素像圖片什么的也是這個(gè)道理。ppk把這個(gè)viewport叫做 ideal viewport（理想視口），也就是第三個(gè)viewport——移動(dòng)設(shè)備的理想viewport。

理想視口并沒有一個(gè)固定的尺寸，不同的設(shè)備擁有有不同的理想視口。所有的iphone的理想視口寬度都是320px，無(wú)論它的屏幕寬度是320還是640，也就是說，在iphone中，css中的320px就代表iphone屏幕的寬度。但是安卓設(shè)備就比較復(fù)雜了，有320px的，有360px的，有384px的等等，關(guān)于不同的設(shè)備ideal viewport的寬度都為多少，可以到http://viewportsizes.com去查看一下，里面收集了眾多設(shè)備的理想寬度。

視口總結(jié)：ppk把移動(dòng)設(shè)備上的viewport分為布局視口、視覺視口和理想視口三類，其中的理想視口是最適合移動(dòng)設(shè)備的viewport，理想視口的寬度等于移動(dòng)設(shè)備的屏幕寬度，只要在css中把某一元素的寬度設(shè)為理想視口的寬度(單位用px)，那么這個(gè)元素的寬度就是設(shè)備屏幕的寬度了，也就是寬度為100%的效果。理想視口的意義在于，無(wú)論在何種分辨率的屏幕下，那些針對(duì)理想視口而設(shè)計(jì)的網(wǎng)站，不需要用戶手動(dòng)縮放，也不需要出現(xiàn)橫向滾動(dòng)條，都可以完美的呈現(xiàn)給用戶。

獲取三個(gè)視口：

???????var layout=document.documentElement.clientwidth; //獲取布局視口 var visual = window。innerwidth; //獲取視覺視口幾乎全部支持 var ideal = screen.width; //有的代表理想視口的寬度，有的代表設(shè)備的分辨率

利用meta標(biāo)簽對(duì)viewport進(jìn)行控制

移動(dòng)設(shè)備默認(rèn)的viewport是layout viewport，也就是那個(gè)比屏幕要寬的viewport，但在進(jìn)行移動(dòng)設(shè)備網(wǎng)站的開發(fā)時(shí)，我們需要的是ideal viewport。那么怎么才能得到ideal viewport呢？這就該輪到meta標(biāo)簽出場(chǎng)了。

我們?cè)陂_發(fā)移動(dòng)設(shè)備的網(wǎng)站時(shí)，最常見的的一個(gè)動(dòng)作就是把下面這個(gè)東西復(fù)制到我們的head標(biāo)簽中：

該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求，但讓viewport的寬度等于設(shè)備的寬度，這個(gè)應(yīng)該是大家都想要的效果，如果你不這樣的設(shè)定的話，那就會(huì)使用那個(gè)比屏幕寬的默認(rèn)viewport，也就是說會(huì)出現(xiàn)橫向滾動(dòng)條。

這個(gè)name為viewport的meta標(biāo)簽到底有哪些東西呢，又都有什么作用呢？

meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動(dòng)設(shè)備的viewport問題。后來(lái)安卓以及各大瀏覽器廠商也都紛紛效仿，引入對(duì)meta viewport的支持，事實(shí)也證明這個(gè)東西還是非常有用的。

設(shè)置理想視口:

要得到理想視口就必須把默認(rèn)的布局視口的寬度設(shè)為移動(dòng)設(shè)備的屏幕寬度。因?yàn)閙eta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設(shè)為width-device這個(gè)特殊的值就行了。

可以看到通過width=device-width，所有瀏覽器都能把當(dāng)前的viewport寬度變成理想視口的寬度，但要注意的是，在iphone和ipad上，無(wú)論是豎屏還是橫屏，寬度都是豎屏?xí)r理想視口的寬度。

這句代碼也能達(dá)到和前一句代碼一樣的效果，也可以把當(dāng)前的的viewport變?yōu)?理想視口。

因?yàn)閺睦碚撋蟻?lái)講，這句代碼的作用只是不對(duì)當(dāng)前的頁(yè)面進(jìn)行縮放，也就是頁(yè)面本該是多大就是多大。那為什么會(huì)有 width=device-width 的效果呢？

要想清楚這件事情，首先你得弄明白這個(gè)縮放是相對(duì)于什么來(lái)縮放的，因?yàn)檫@里的縮放值是1，也就是沒縮放，但卻達(dá)到了 ideal viewport 的效果，所以，那答案就只有一個(gè)了，縮放是相對(duì)于 ideal viewport來(lái)進(jìn)行縮放的，當(dāng)對(duì)ideal viewport進(jìn)行100%的縮放，也就是縮放值為1的時(shí)候，不就得到了 ideal viewport 嗎？事實(shí)證明，的確是這樣的

但如果 width 和 initial-scale=1 同時(shí)出現(xiàn)，并且還出現(xiàn)了沖突呢？比如：

width=400 表示把當(dāng)前 viewport 的寬度設(shè)為400px，initial-scale=1 則表示把當(dāng)前 viewport 的寬度設(shè)為ideal viewport的寬度，那么瀏覽器到底該服從哪個(gè)命令呢？是書寫順序在后面的那個(gè)嗎？不是。當(dāng)遇到這種情況時(shí)，瀏覽器會(huì)取它們兩個(gè)中較大的那個(gè)值。例如，當(dāng)width=400，ideal viewport 的寬度為320時(shí)，取的是400；當(dāng)width=400， ideal viewport的寬度為480時(shí)，取的是ideal viewport的寬度

要把當(dāng)前的viewport寬度設(shè)為ideal viewport的寬度，既可以設(shè)置 width=device-width，也可以設(shè)置 initial-scale=1，但這兩者各有一個(gè)小缺陷，就是iphone、ipad以及IE 會(huì)橫豎屏不分，通通以豎屏的ideal viewport寬度為準(zhǔn)。所以，最完美的寫法應(yīng)該是，兩者都寫上去，：

12、適配

等比問題：

沒有加name 為viewport的meta標(biāo)簽：

一個(gè)相同css像素大小的區(qū)域在不同的設(shè)備上是等比的；在不同的設(shè)備上占據(jù)的實(shí)際物理像素大小（英寸）是不一樣的。

加name為viewport的meta標(biāo)簽：

一個(gè)相同css像素大小的區(qū)域在不同的設(shè)備上是不等比的;在不同的設(shè)備上占據(jù)的實(shí)際物理像素大小（英寸）是一樣的。

那么等比是不是一個(gè)必須需要的呢？肯定是的。百分之百還原設(shè)計(jì)稿是在不同的設(shè)備上要等比。

通過上面的結(jié)論，有的人認(rèn)為要想實(shí)現(xiàn)等比不加meta標(biāo)簽不就可以了嗎？但是如果不加meta標(biāo)簽，字體什么的就會(huì)不清晰。文字要完美清晰的展示需要加上meta標(biāo)簽。但是問題是：加上meta標(biāo)簽就不等比了，所以這就是我們要做的適配，加上meta標(biāo)簽后也要等比。百分之百還原設(shè)計(jì)圖，讓你的網(wǎng)頁(yè)在不同的設(shè)備上等比這就是適配。我們常見的適配方案有：百分比適配，rem適配和viewport適配。

（1）rem適配

rem：是一個(gè)單位，相對(duì)于根元素HTML中font-size的大小

? ? html{font-size: 40px;}#box{width: 10rem; //box的寬為 40*10=400height:300px;background: pink;/* font-size: 20px; */}

rem適配代碼：

//獲取布局視口的大小 //var html=document.querySelector("html");//html.style.fontSize = document.documentElement.clientWidth/10+"px";(function(){var styleNode=document.createElement("style");var w=document.documentElement.clientWidth/10;styleNode.innerHTML="html{font-size:"+w+"px!important;}";document.head.appendChild(styleNode); })()

rem適配原理：改變了一個(gè)元素在不同設(shè)備上占據(jù)的css像素個(gè)數(shù)

優(yōu)點(diǎn)：沒有破壞完美視口

缺點(diǎn)：px值到rem轉(zhuǎn)化太復(fù)雜

（2）視口適配

//將所有設(shè)備布局視口的寬度調(diào)整為設(shè)計(jì)圖的寬度/*var targetW = 640;var scale = screen.width/targetW;var meta = document.createElement("meta");meta.name = "viewport";meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";document.head.appendChild(meta);*///viewport/*viewport適配的原理：viewport適配方案中，每一個(gè)元素在不同設(shè)備上占據(jù)的css像素的個(gè)數(shù)是一樣的。但是css像素和物理像素的比例是不一樣的，等比的*//*viewport適配的優(yōu)缺點(diǎn)：優(yōu)點(diǎn):所量即所得缺點(diǎn):沒有使用完美視口*/(function(){var targetW = 640;var scale = document.documentElement.clientWidth/targetW;var meta = document.querySelector("meta[name='viewport']");meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";})()

（3）百分比適配

百分比適配相對(duì)比較簡(jiǎn)單。

高度設(shè)置百分比的條件：

所有父級(jí)元素必須有高度；必須是塊級(jí)元素，行內(nèi)元素不起作用； ie9 以下使用 position:ralative 的塊級(jí) 元素使用高度百分比是無(wú)效的。響應(yīng)式布局：簡(jiǎn)而言之，就是頁(yè)面元素的位置隨著屏幕尺寸的變化而變化，通常會(huì)用百分比來(lái)定位，而在設(shè)計(jì)上需要預(yù)留一些可被“壓縮”的空間（如果高度不能設(shè)置百分比的時(shí)候可以把已經(jīng)設(shè)置的margin，padding 設(shè)置成百分比的形式，預(yù)留出唄被壓縮的空間） —— 相對(duì)比較適用于內(nèi)容需要一屏展示。

總結(jié)

以上是生活随笔為你收集整理的移动端像素概念，viewport，适配的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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