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

由于文章篇幅原因，結論先行：

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

2、任何圖片作為數(shù)據(jù)信息被保存在存儲盤中時，只有寬高像素數(shù)是有意義的，此時的ppi對于圖片來說時沒有任何意義，也并不能描述這個圖片有多少英寸的寬度或者高度，而只有在被打印出來后才有ppi的意義，被打印出來才可以描述這張圖片有多高多寬。

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

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

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

6、文字默認24px   小點兒可以20px 但是不能再小了