html移動端頁面、圖片多少寬度最合適?
目前網站開發已經更多的轉向移動端設計、製作,想詢問一下移動端網頁寬度多少合適?960px、640px、480px、320px?圖片多少寬度適合?比如用640px的圖片寬度設置為320px是否比較清晰?但是圖片大小會較大是否合適?
我用的一個傻辦法,rem首先,只需要要求美術按照6plus的解析度來設計和出圖。
然後頁面HTML元素設置font-size:100px,接著頁面里任何需要設置尺寸的,都使用rem,因為我設定了font-size為100px,所以尺寸可以很容易的轉換,比如10px=.1rem
html{font-size:100px;}×{font-size:.14rem}接著,頁面啟動需要一個js語句,用以獲得當前屏幕解析度跟設計稿解析度的比例,乘以100,去設置html的font-size,這樣頁面所有實用rem的元素都將獲得對應的尺寸.設計稿如果以640為寬度
var scale = $("body").width() / 640;$("html").css("font-size", 100 * scale + "px");頁面啟動執行一下就可以了,也可以在onsize事件里添加一份,這樣頁面發生變化,也會自動適應.不謝邀,這種看需求和設計的事拿出來問有意義么?
才疏學淺,看不懂 @王崇悟寫的東西有啥實際意義。
&
我從來都是這麼寫的 = =
我在公司做了一年移動端開發了,設計給過來的視覺稿比較常見的有兩個,640跟750。建議你可以看看淘寶的flexible解決方案。詳見:
移動端高清、多屏適配方案
補充:移動端適配方案淺析製作了很長時間的wap站點,這個問題還是未有人來解答。我自己回答一下吧,如有不足望各位補充。
目前手機市場魚龍混雜,高端如iPhone6 Plus,低端如Android 2.2(不是黑Android,確實如此),那麼屏幕的解析度也各式各樣。經過長時間的摸索與實踐,尤其各類微信活動開發過程中得到的經驗,我在此分享給大家。
&部分引用:&
&
&
頁面尺寸定背景640*1039(iPhone6 Plus在微信瀏覽器中的尺寸),內容區域定在640*832(iPhone4在微信瀏覽器中的尺寸),相對於背景垂直居中。如果不需要兼容iPhone4的屏幕(不過基本客戶都會要求去兼容),那麼內容區域最好定義在640*1008(iPhone5及大部分中高端安卓機在微信瀏覽器中得尺寸),依然相對於背景垂直居中。如果客戶對於圖片有特別高精度的要求,那麼psd中的需要高精度的圖片尺寸請使用切片寬高一倍大的圖片(甚至更大,也能0.5倍,視情況而定),頁面中給img設置width即可。
至於如何去布局背景、放置內容區域、切圖,我也無法提供更多幫助了,在實踐中摸索、探索方能找到真知。
希望能幫助到需要幫助的人。移動端頁面通常尺寸一般是640像素大小,但是會考慮到能在各個手機上保證清晰度,最好可以稍微大一些,但是不能小,就像設計做好的圖片可以縮放,依然保持清晰度。有小變大就會模糊,這樣就不行。所以通常情況下建議圖片製作大一些,
自己之前有做過電商設計,像電商移動端圖片有活動頁面,和詳情頁頁面,活動頁面各個平台都有明確規定和要求,多一像素少一像素都不行,所以這方面的尺寸不需要糾結。
像目前的h5頁面貌似沒有明確的規定,我本身就是做H5頁面設計的,通常做H5會使用的人人秀H5製作頁面編輯,它默認畫板寬度大小就是640像素,通常在設計頁面的時候會稍微做寬一些,可以是710~800這個範圍波動,960也是可以的,只是像素大了多少會影響打開頁面的速度。目前我都是按照710做的,剛剛好,不會出現白邊情況。如果按照640寬度來做,最後效果在很多手機顯示正常,但是在寬頻手機上就會留出很明顯的白邊,影響畫面感。
640px的圖片寬度可以設置為320px,就和原本320寬度圖片大小一樣清晰,寬度縮小了,圖片自然也變小了,不影響清晰度。但是絕對不能把像素小的圖片尺寸改大,或拉大,這樣會不清晰。
Viewport,圖片width100%
推薦閱讀:
※目前有哪些製作 Material Design 風格網頁的庫?
※如何看待web開發前端框架QUICK UI?
※CSS3 中存在哪些重要的概念?
※如何判斷一個APP頁面是否是H5頁面?
※怎麼理解CSS中vertical-align這個屬性?