如何設(shè)計(jì)移動(dòng)端屏適配方案？首先，說(shuō)清楚。移動(dòng)終端包括Android、apple、webapp、applet等，每種適配方案各不相同，但總體思路相同。如果可以使用百分比，就不要寫死像素。然后是每個(gè)設(shè)備的

如何設(shè)計(jì)移動(dòng)端屏適配方案？

首先，說(shuō)清楚。移動(dòng)終端包括Android、apple、webapp、applet等，每種適配方案各不相同，但總體思路相同。如果可以使用百分比，就不要寫死像素。然后是每個(gè)設(shè)備的具體適配方案。

為什么很多web項(xiàng)目還是使用px，而不是rem？

在移動(dòng)終端剛剛流行的早期，為了使手機(jī)頁(yè)面適應(yīng)不同大小的手機(jī)屏幕，淘寶網(wǎng)的一位前端老板寫了一個(gè)經(jīng)過(guò)改編的JS，叫做flexible，可以在GitHub找到。原理很簡(jiǎn)單。似乎根據(jù)手機(jī)的分辨率和DPI（我不記得了），動(dòng)態(tài)設(shè)置根元素HTML的fontsize，然后頁(yè)面元素的大小就是rem，因?yàn)?rem=fontsizeofhtml。

后來(lái)，出現(xiàn)了大眾和VH。漸漸地，許多項(xiàng)目使用大眾汽車進(jìn)行改編。100vw=100%寬度。因?yàn)榧嫒菪圆皇呛芎?，所以一直沒(méi)有上線。

nodejs出現(xiàn)后，前端工程開始了。有pxtorem和pxtoview port等插件。在開發(fā)過(guò)程中，我們可以根據(jù)UI標(biāo)記的PX case直接編寫它們。在打包時(shí)，插件將幫助我們將PX計(jì)算轉(zhuǎn)換為REM或VW。

我現(xiàn)在用大眾。不考慮兼容性。我甚至不看那些需要與ie兼容的公司。[遮住你的臉

你好，我認(rèn)為至少有三個(gè)理由說(shuō)明為什么應(yīng)該有移動(dòng)終端的設(shè)計(jì)規(guī)范。

1. 對(duì)于設(shè)計(jì)師：為后續(xù)版本迭代和多人合作提供指導(dǎo)，保持產(chǎn)品的統(tǒng)一性；由于一個(gè)項(xiàng)目從開始到下一次更新迭代需要很長(zhǎng)時(shí)間，可能會(huì)有很多設(shè)計(jì)師參與，但每個(gè)人的風(fēng)格不同，會(huì)影響整體視覺(jué)體驗(yàn)，所以有了規(guī)范，設(shè)計(jì)師就可以在產(chǎn)品視覺(jué)上得到統(tǒng)一，便于更新迭代。

2. 對(duì)于開發(fā)：提供標(biāo)準(zhǔn)化的組件樣式以減少開發(fā)重復(fù)時(shí)間。

因?yàn)橛辛艘?guī)范，以后的維護(hù)就方便多了，設(shè)計(jì)師不需要再做標(biāo)記，開發(fā)時(shí)也不需要重新寫樣式，直接修改內(nèi)容。

3. 對(duì)于用戶：符合大眾的視覺(jué)體驗(yàn)。因?yàn)楝F(xiàn)實(shí)中，人們?cè)谠O(shè)計(jì)移動(dòng)終端產(chǎn)品時(shí)，在字體、圖標(biāo)間距等方面都有一個(gè)普遍的習(xí)慣

下面的圖是我收集的部分規(guī)范與大家分享，大家一起學(xué)習(xí)