目前網站開發已經更多的轉向移動端設計、制作，想詢問一下移動端網頁寬度多少合適？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事件里添加一份,這樣頁面發生變化,也會自動適應.

目前手機市場魚龍混雜，高端如iPhone6 Plus，低端如Android 2.2(不是黑Android，確實如此)，那么屏幕的分辨率也各式各樣。經過長時間的摸索與實踐，尤其各類微信活動開發過程中得到的經驗，我在此分享給大家。

var?phoneWidth?=??parseInt(window.screen.width);

var?phoneScale?=?phoneWidth/640;

var?ua?=?navigator.userAgent;

if?(/Android?(\d+\.\d+)/.test(ua)){

var?version?=?parseFloat(RegExp.$1);

if(version>2.3){

document.write('');

}else{

document.write('');

}

}?else?{

document.write('');

}

頁面尺寸定背景640*1039(iPhone6 Plus在微信瀏覽器中的尺寸)，內容區域定在640*832(iPhone4在微信瀏覽器中的尺寸)，相對于背景垂直居中。如果不需要兼容iPhone4的屏幕(不過基本客戶都會要求去兼容)，那么內容區域最好定義在640*1008(iPhone5及大部分中高端安卓機在微信瀏覽器中得尺寸)，依然相對于背景垂直居中。如果客戶對于圖片有特別高精度的要求，那么psd中的需要高精度的圖片尺寸請使用切片寬高一倍大的圖片(甚至更大，也能0.5倍，視情況而定)，頁面中給img設置width即可。

至于如何去布局背景、放置內容區域、切圖，我也無法提供更多幫助了，在實踐中摸索、探索方能找到真知。

希望能幫助到需要幫助的人。

總結

以上是生活随笔為你收集整理的html wap 转换,html移动端wap页面、图片多少宽度最合适？【转载】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。