每次ios視覺稿還原時(shí)烙常，我都在想為什么設(shè)計(jì)師總是給出750px的設(shè)計(jì)稿？
想弄明白這個(gè)問題虑瀑，我又問自己下面兩個(gè)小問題邻遏，其實(shí)這兩個(gè)問題是相互聯(lián)系的，讓我們一一道來
問題一：像素和分辨率是什么汹桦？
問題二：為什么是750鲁驶，而不是375？
先回答第一個(gè)問題舞骆，像素和分辨率是什么
- 像素
像素即px钥弯，是畫面中最小的點(diǎn)（單位色塊）。像素的大小是沒有固定長(zhǎng)度值的督禽，不同設(shè)備上1個(gè)單位像素色塊的大小是不一樣的脆霎，一個(gè)像素點(diǎn)是一個(gè)顏色。像素有個(gè)物理像素和設(shè)備獨(dú)立像素之分狈惫。- 物理像素
一個(gè)物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元（像素顆粒）睛蛛，在操作系統(tǒng)的調(diào)度下，每一個(gè)設(shè)備像素都有自己的顏色值和亮度值胧谈。 - 設(shè)備獨(dú)立像素
也叫密度無關(guān)像素忆肾，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素第岖，也稱為邏輯像素难菌。css像素就是設(shè)備獨(dú)立像素的一種试溯。 - 設(shè)備像素比(device pixel ratio )簡(jiǎn)稱dpr
設(shè)備像素比 = 物理像素 / 邏輯像素(px)
- 物理像素
- 分辨率
分辨率 = 畫面水平方向的像素值 * 畫面垂直方向的像素值蔑滓。
分辨率可以分為兩方面：屏幕分辨率和圖像分辨率。屏幕分辨率
水平方向的像素點(diǎn)數(shù) * 垂直方向的像素點(diǎn)數(shù)圖像分辨率
圖像分辨率是指每英寸圖像內(nèi)的像素點(diǎn)數(shù)遇绞。
圖像分辨率是有單位的键袱，叫像素每英寸（PPI），數(shù)值越高顯示效果越細(xì)致圓滑摹闽，而不是越逼真蹄咖。另外，這個(gè)數(shù)值高了以后付鹿，手機(jī)每次要渲染的像素?cái)?shù)量就提高了澜汤，所以當(dāng)然會(huì)更加費(fèi)電。
PPI = 根號(hào)（x^2 +y^2）/ 屏幕尺寸舵匾。-
屏幕分辨率和圖像分辨率的關(guān)系
（1）圖像的分辨率 > 顯示器的分辨率
局部顯示：即屏幕的像素有多少就顯示多少像素俊抵，這時(shí)只能看到圖片的某一部分，可以上下左右的移動(dòng)來看完整的內(nèi)容坐梯。
完整顯示：圖片的像素會(huì)被壓縮徽诲，這時(shí)可以看到完整的圖片內(nèi)容，不過在細(xì)節(jié)上是丟失一小部分像素的。（2）圖像的分辨率 < 顯示器的分辨率
1:1顯示：即圖片的分辨率是多少谎替，就用屏幕上的多少個(gè)像素來顯示偷溺，這時(shí)屏幕是以點(diǎn)對(duì)點(diǎn)的方式來顯示圖片，不過圖片不是全屏钱贯，只在屏幕中央的一部分挫掏。
縮放顯示：圖片不是被壓縮像素，而是被人為的插入了很多像素秩命，圖片看起來很大砍濒，滿屏顯示，不過有效像素很少硫麻。效果就是很不清晰爸邢。
知道了分辨率和像素的基本知識(shí)后，我們來回答第二個(gè)問題拿愧？為什么iphone6的設(shè)計(jì)稿是750px杠河，而不是375px?
首先我們將這個(gè)問題延伸一下，750px是iphone6的物理像素浇辜，問題就變成移動(dòng)端設(shè)計(jì)稿為什么是按照設(shè)備的物理像素所給券敌？
也叫做邏輯像素(對(duì)于前端來說,和我們的css像素是一樣的),這個(gè)不同的設(shè)備是不一樣的。在viewport為ideal-viewport模式時(shí), 如iphone6此時(shí)的viewport為375px,代表著我們?cè)赾ss中寫375px就可以達(dá)到全屏的效果;
之所以這么做柳洋，主要是為了考慮移動(dòng)端網(wǎng)頁適配的問題待诅。
各個(gè)設(shè)備的屏幕分辨率不同，dpr不同熊镣，設(shè)計(jì)師如果針對(duì)每個(gè)設(shè)備出一個(gè)設(shè)計(jì)稿估計(jì)會(huì)吐血卑雁，所以設(shè)計(jì)師只會(huì)出少數(shù)固定尺寸的設(shè)計(jì)稿，那么固定尺寸的設(shè)計(jì)稿如何變成各個(gè)設(shè)備上都可以完美顯示的頁面呢绪囱？這就需要做頁面適配测蹲，現(xiàn)在移動(dòng)端的適配方案主要是rem布局。
-
rem布局的核心就是將css像素單位轉(zhuǎn)換為rem單位鬼吵，進(jìn)而實(shí)現(xiàn)一套代碼在不同設(shè)備上的等比例顯示扣甲，1rem的設(shè)定是根據(jù)不同的設(shè)備而設(shè)定的，設(shè)定方式有兩種：一種是通過js動(dòng)態(tài)設(shè)定齿椅；另一種是通過媒體查詢?cè)O(shè)定琉挖。這里不做展開，我們僅看一下js動(dòng)態(tài)設(shè)定的內(nèi)容涣脚，方便我們理解適配
function changeRootFont() { var designWidth = 750, rem2px = 100; document.documentElement.style.fontsize = ((window.innerWidth / designWidth) * rem2px) + 'px'; //iphone6: (375 / 750) * 100 + 'px'; };這段代碼通過動(dòng)態(tài)的獲取設(shè)備獨(dú)立像素,然后除以設(shè)計(jì)稿的寬度,然后賦給根字體的fontsize,以致來動(dòng)態(tài)改變跟字體大小,做到自適應(yīng)示辈。為什么要乘100,首先375 / 750是0.5,瀏覽器默認(rèn)最小字體為12px,所以我們需要放大一些,而100又很好算,我們只需要將設(shè)計(jì)稿量出來的長(zhǎng)度(px),小數(shù)點(diǎn)向左移2位,單位變成rem就好了。
