由于HTML5和微信內(nèi)置瀏覽器的火爆，移動(dòng)端H5網(wǎng)頁(yè)越發(fā)流行。在設(shè)計(jì)制作移動(dòng)端網(wǎng)頁(yè)的時(shí)候，你是否疑惑，這種網(wǎng)站設(shè)計(jì)稿應(yīng)該做成的多少屏寬，是否應(yīng)該跟手機(jī)的分辨率一致，還是應(yīng)該按照iPhone的分辨率來(lái)設(shè)計(jì)（注意H5網(wǎng)頁(yè)區(qū)別于APP，APP的設(shè)計(jì)稿直接按照手機(jī)分辨率來(lái)設(shè)計(jì)）？那么對(duì)于現(xiàn)在2K屏幕的手機(jī)，應(yīng)該如何制作設(shè)計(jì)稿和前端稿呢？

由于文章篇幅原因，結(jié)論先行：

1、像素是沒(méi)有寬高的（不要被Photoshop中的像素格欺騙），它只代表一個(gè)采樣的色值。

2、任何圖片作為數(shù)據(jù)信息被保存在存儲(chǔ)盤(pán)中時(shí)，只有寬高像素?cái)?shù)是有意義的，此時(shí)的ppi對(duì)于圖片來(lái)說(shuō)時(shí)沒(méi)有任何意義，也并不能描述這個(gè)圖片有多少英寸的寬度或者高度，而只有在被打印出來(lái)后才有ppi的意義，被打印出來(lái)才可以描述這張圖片有多高多寬。

3、平時(shí)制作H5頁(yè)面時(shí)設(shè)計(jì)原型時(shí)，產(chǎn)品經(jīng)理出的原型稿建議屏寬為320px，用這個(gè)尺寸一是為了瀏覽方便（現(xiàn)在很多手機(jī)的屏寬達(dá)到1440px，用這個(gè)尺寸去模擬顯然不現(xiàn)實(shí)），二是以iPhone5s為標(biāo)準(zhǔn)的手機(jī)屏寬較小，進(jìn)行內(nèi)容排版布局時(shí)屏寬應(yīng)該向下兼容。

4、制作設(shè)計(jì)稿時(shí)，設(shè)計(jì)師應(yīng)該把原型稿上的所有尺寸進(jìn)行2倍處理。這樣設(shè)計(jì)稿在移動(dòng)設(shè)備上預(yù)覽便可保證清晰。而前端切片時(shí)，按照現(xiàn)在流行的做法，可以直接使用原型稿上的尺寸，也就是設(shè)計(jì)稿上的1/2。

5、一般情況下，H5頁(yè)面設(shè)計(jì)稿做成640x1136px是最為穩(wěn)妥的尺寸，在812px高度處增加一條安全線，重要內(nèi)容在此線之上（網(wǎng)上有些文章說(shuō)安全線是960px處，個(gè)人認(rèn)為不太準(zhǔn)確）。既保證了在移動(dòng)設(shè)備上顯示清晰，也保證了素材的最小尺寸。推薦前端攻城獅使用騰訊智圖，這里的圖片壓縮還是相當(dāng)好用，可以節(jié)省用戶不少帶寬。

6、文字默認(rèn)24px   小點(diǎn)兒可以20px 但是不能再小了