在這篇文章中將和大家探討一下關(guān)于前端在移動(dòng)端開發(fā)如何去實(shí)現(xiàn)視覺設(shè)計(jì)稿。探討過后，在大家的實(shí)際工作中或許能幫助解決一些問題诈火。
前端工程師需要明白的「像素」
一般設(shè)計(jì)稿是 640px 或者 750px（現(xiàn)在最流行）导坟，但是 iPhone 5 不是 320px 寬嗎，iPhone 6 不是 375px 寬嗎?
這里需要理解一下基礎(chǔ)概念： 設(shè)備像素(device pixel)屎蜓，CSS 像素(css pixel)以及設(shè)備像素比(device pixel ratio)。
設(shè)備像素 (device pixel):
設(shè)備像素設(shè)是物理概念钥勋，指的是設(shè)備中使用的物理像素炬转。
比如 iPhone 5 的分辨率640 x 1136px辆苔。CSS 像素 (css pixel):
CSS 像素是 Web 編程的概念，指的是 CSS 樣式代碼中使用的邏輯像素扼劈。
在 CSS 規(guī)范中驻啤，長(zhǎng)度單位可以分為兩類，絕對(duì) (absolute) 單位以及相對(duì) (relative) 單位荐吵。px是一個(gè)相對(duì)單位骑冗，相對(duì)的是設(shè)備像素 (device pixel)。設(shè)備像素比 (device pixel ratio):
即window.devicePixelRatio先煎，是設(shè)備上物理像素和設(shè)備獨(dú)立像素 (device-independent pixels (dips)) 的比例贼涩。
公式表示就是window.devicePixelRatio = 物理像素 / dips
垂直手機(jī)屏幕下，使用<meta name="viewport" content="width=device-width"/>薯蝎，iPhone 5 屏幕物理像素 640 像素遥倦，獨(dú)立像素還是 320 像素，因此占锯，window.devicePixelRatio 等于 2袒哥。
比如 iPhone 5，6 使用的是 Retina 視網(wǎng)膜屏幕（2 倍屏）消略，6 Plus 是 3 倍屏堡称，使用2px × 2px的 device pixel 代表1px × 1px的 css pixel，所以設(shè)備像素?cái)?shù)為640 × 1136px（5）疑俭，750 × 1134（6）粮呢，而 CSS 邏輯像素?cái)?shù)為 320 x 568px（5），375 × 667（6）钞艇；5啄寡，6 的 window.devicePixelRatio=2，6 Plus 為 3哩照。
H5 適配：rem 方案
rem：是 CSS3 新增的一個(gè)相對(duì)單位挺物，相對(duì)于 html 標(biāo)簽的 font-size 的大小為基礎(chǔ)的。而 font-size 的大小可以動(dòng)態(tài)根據(jù)手機(jī)屏幕寬度document.documentElement.clientWidth 來(lái)設(shè)置飘弧，從而達(dá)到自適應(yīng)屏幕的目的识藤。
我這里找了一下小米，網(wǎng)易次伶，拉勾網(wǎng)痴昧，手淘 以及糯米，大同小異冠王。
小米官網(wǎng)
設(shè)計(jì)稿是 720px 的赶撰，即 5 英寸屏幕的安卓手機(jī)（720 x 1280px）。
對(duì)于頁(yè)面縮放和橫豎屏事件進(jìn)行監(jiān)聽，改變 html 根元素字體 clientWidth/720/100豪娜。
如圖是這樣計(jì)算的 375/(720/100) = 52.0833
網(wǎng)易
iPhone 6 : 375/7.5=50, 則知道設(shè)計(jì)稿應(yīng)該是基于 iPhone 6 來(lái)的餐胀，所以它的設(shè)計(jì)稿豎直放時(shí)的橫向分辨率為 750px，為了計(jì)算方便瘤载，取一個(gè) 100px 的 font-size 為參照否灾，那么 body 元素的寬度就可以設(shè)置為 width: 7.5rem，于是 html 的 font-size=deviceWidth / 7.5鸣奔。布局時(shí)墨技，設(shè)計(jì)圖標(biāo)注的尺寸除以 100 得到 css 中的尺寸。并且布局中的 font-size 也可用 rem 單位溃蔫。
拉勾網(wǎng)
html {
font-size: 65.5%;
}
設(shè)置html根元素字體為65.5%健提，對(duì)應(yīng)px單位則為10.48px琳猫，則列表里時(shí)間信息字體設(shè)置為1rem = 10.48px伟叛，chrome在-webkit-text-size-adjust: 100%;情況下小于12px的一律顯示為12px。
拉勾網(wǎng)頁(yè)面列表部分是px為單位脐嫂，字體是rem统刮，底部bar是使用百分百來(lái)控制寬高間距。
之前網(wǎng)上討論的比較多的是
body {
font-size: 62.5%;
}
p {
font-size: 1.2em;
}
則 1em = 16px * 62.5% = 10px账千，em 的初始值為 1em = 16px侥蒙，而為了方便計(jì)算， 換算一下 10 / 16（16px 是 Chrome 瀏覽器默認(rèn)字體大性茸唷）鞭衩。缺點(diǎn)是進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小娃善，比較繁瑣低效论衍。
手淘
（1）動(dòng)態(tài)設(shè)置 viewport的scale
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
（2）動(dòng)態(tài)計(jì)算 html 的 font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
（3）布局的時(shí)候，各元素的 css 尺寸 = 設(shè)計(jì)稿標(biāo)注尺寸/設(shè)計(jì)稿橫向分辨率/10
設(shè)計(jì)稿是 750 的聚磺，所以 html 的 font-size 就是 75坯台，如果某個(gè)元素是 150px的寬，換算成 rem 就是 150 / 75 = 2rem瘫寝。
整個(gè)手淘設(shè)計(jì)師和前端開發(fā)的適配協(xié)作基本思路是：
- 選擇一種尺寸作為設(shè)計(jì)和開發(fā)基準(zhǔn)
- 定義一套適配規(guī)則蜒蕾，自動(dòng)適配剩下的兩種尺寸(介于 iPhone 6的小屏和大屏)
- 特殊適配效果給出設(shè)計(jì)效果
手淘推出了一套移動(dòng)端適配的方案——Flexible 方案。
總結(jié)來(lái)說：
- 動(dòng)態(tài)讀取設(shè)備寬度并結(jié)合設(shè)備的像素比
- 動(dòng)態(tài)改變 html 的 font-size 大小 & 頁(yè)面縮放比例
- 影響以 rem 為單位的元素的最終呈現(xiàn)
px 方案：css 尺寸為對(duì)應(yīng)設(shè)計(jì)稿／2
設(shè)計(jì)稿是 750 的焕阿。
優(yōu)點(diǎn)：簡(jiǎn)單粗暴咪啡，所有 css 尺寸均為設(shè)計(jì)稿尺寸直接除 2，開發(fā)快速簡(jiǎn)單暮屡；
缺點(diǎn)：可能出現(xiàn)一排放不下的情況撤摸，需要針對(duì)小屏幕如 5 及以下做單獨(dú)適配
vw 方案
-
糯米 WAP
利用 CSS3 中新增單位<mark style="background: rgb(255, 255, 0); color: rgb(0, 0, 0);">vw</mark>，配合<mark style="background: rgb(255, 255, 0); color: rgb(0, 0, 0);">百分比</mark>`來(lái)做響應(yīng)式開發(fā)。
| 單位 | 釋義 | 說明 |
|---|---|---|
| px | 相對(duì)于顯示器屏幕分辨率 | - |
| em | 相對(duì)于父元素字體大小 | - |
| rem | 相對(duì)于根元素字體大小 | css3 |
| vw | 相對(duì)于視窗的寬度 | css3 |
| vh | 相對(duì)于視窗的高度 | css3 |
vw 相對(duì)于視窗的寬度：視窗寬度是 100vw愁溜。
如果視區(qū)寬度是 100vm, 則 1vm 是視區(qū)寬度的 1/100, 也就是 1%疾嗅，類似于 width: 1%。
那 iPhone 6 來(lái)說冕象，document.documentElement.clientWidth=375, 則豆腐塊寬度為 375/100*30=112.5px
混合: rem px vw 百分百等單位混用
- rem & 百分比%
body {
padding-bottom: 14.0625%;
}
a.link {
width: 30vw;
height: 23vw;
}
略代承，同上糯米WAP
- rem & vw
html {
font-size: 4.375vw;
}
這里假設(shè)設(shè)計(jì)稿 640px，則設(shè)置根元素 font-size 為 4.375vw渐扮，根據(jù)屏幕寬度自適應(yīng)论悴，在視窗寬度為 320px 的時(shí)候，正好是 14px (14 / 320 = 0.04375)墓律。 達(dá)到頁(yè)面默認(rèn)字體大小 14px 的目的（其他大小也 ok）膀估。好了，現(xiàn)在頁(yè)面上所有以 rem 為單位的屬性值都會(huì)隨著屏幕的寬度變化而變化耻讽，達(dá)到自適應(yīng)的目的察纯。（自適應(yīng)不用 js 動(dòng)態(tài)設(shè)置根元素大小）
p {
font-size: 1rem;
padding-top: 2rem: /* 設(shè)計(jì)稿上為 28px */
}
總結(jié)
在移動(dòng)端頁(yè)面開發(fā)中，視覺童鞋一般會(huì)用 750px（iPhone 6）來(lái)出設(shè)計(jì)稿针肥，然后要求 FE 童鞋能夠做到頁(yè)面是自適應(yīng)屏幕的饼记，這種情況下就可以用 rem 或者 vm 等相對(duì)單位來(lái)做適配，愉快和視覺童鞋一起玩耍啦慰枕。
內(nèi)容轉(zhuǎn)自：大專欄
