那么多手機屏幕尺寸蛮穿,設計稿應該按照哪一個尺寸作為標準尺寸】鹁欤現(xiàn)在已經(jīng)有2K分辨率的手機屏幕了,設計稿是不是也要把寬高跟著最大分辨率來設計唠粥。顯然不是。
請注意:(以下所有討論內(nèi)容和規(guī)范均將viewport設定為content=”width=device-width”的情況下) 也就是我們的H5頁面前端代碼里面必須包含
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
<meta content="telephone=no" name="format-detection" />
根據(jù)目前市場流行的手機移動終端颁井,統(tǒng)計他們的設備獨立像素厅贪。
在這里,25學堂也跟大家分享一個羅列了當前最流行的手機的所有尺寸大小規(guī)范:http://screensiz.es/phone值得大家好好細看的智能手機尺寸圖表雅宾。
也只有iPhone6+采用了分辨率降頻處理养涮。
8. 靜態(tài)圖盡量保存成png8、或者進行圖片壓縮眉抬,在線png圖片壓縮工具很多贯吓。
這是一張1M的圖片用PS壓縮成jpg、png8蜀变、png24的體積對比悄谐。需要補充的是Png8最多只能展示265種顏色,而png24能有1600萬库北。
所以色彩單一時用png8爬舰,色彩豐富時用jpg,需要追求精度時用png24寒瓦。
9. 無損壓縮圖片可用網(wǎng)站
大家都知道的TinyPNG 和業(yè)界好口碑的智圖情屹。
推薦一個APP切圖文件的PNG壓縮工具-Pnggauntlet
10. 圖片避免大小重設
根據(jù)需求上傳相應尺寸圖片,避免大小重設杂腰,不寬于640像素(基于手機屏幕一般寬度)垃你,避免造成圖片質(zhì)量剩余。
11、善于用H5工具匹配多終端
H5中背景圖片寬度固定為640px惜颇,那如何匹配高度呢皆刺?
如果你用的是H5制作工具——ih5.cn,就能夠解決凌摄。
打開ih5.cn羡蛾,在舞臺下添加【移動設備】功能,設置不同方案的高度锨亏,案例就可以根據(jù)終端設備自動跳轉(zhuǎn)到對應的方案去瀏覽林说。這種方法需要重復設計多種尺寸的圖,堪稱累倒設計師的方法屯伞。
偷懶的設計師們用的是——將設計文檔統(tǒng)一按照最大方案也就是640*1040px來創(chuàng)建,然后添加一個移動設備豪直,選擇默認高度劣摇,在設計文檔時記得將主要的信息放在中間,重要的按鈕盡量往中間放弓乙。