目前網(wǎng)站開(kāi)發(fā)已經(jīng)更多的轉(zhuǎn)向移動(dòng)端設(shè)計(jì)、制作，想詢問(wèn)一下移動(dòng)端網(wǎng)頁(yè)寬度多少合適？960px、640px、480px、320px？圖片多少寬度適合？比如用640px的圖片寬度設(shè)置為320px是否比較清晰？但是圖片大小會(huì)較大是否合適？

我用的一個(gè)傻辦法，rem

首先，只需要要求美術(shù)按照6plus的分辨率來(lái)設(shè)計(jì)和出圖。

然后頁(yè)面HTML元素設(shè)置font-size：100px，接著頁(yè)面里任何需要設(shè)置尺寸的，都使用rem,因?yàn)槲以O(shè)定了font-size為100px，所以尺寸可以很容易的轉(zhuǎn)換,比如10px=.1rem

html{font-size:100px;}

*{font-size:.14rem}

接著,頁(yè)面啟動(dòng)需要一個(gè)js語(yǔ)句,用以獲得當(dāng)前屏幕分辨率跟設(shè)計(jì)稿分辨率的比例,乘以100,去設(shè)置html的font-size,這樣頁(yè)面所有實(shí)用rem的元素都將獲得對(duì)應(yīng)的尺寸。設(shè)計(jì)稿如果以640為寬度

var scale = $('body').width() / 640;

$('html').css('font-size', 100 * scale + 'px');

頁(yè)面啟動(dòng)執(zhí)行一下就可以了,也可以在onsize事件里添加一份,這樣頁(yè)面發(fā)生變化,也會(huì)自動(dòng)適應(yīng).

目前手機(jī)市場(chǎng)魚(yú)龍混雜，高端如iPhone6 Plus，低端如Android 2.2(不是黑Android，確實(shí)如此)，那么屏幕的分辨率也各式各樣。經(jīng)過(guò)長(zhǎng)時(shí)間的摸索與實(shí)踐，尤其各類微信活動(dòng)開(kāi)發(fā)過(guò)程中得到的經(jīng)驗(yàn)，我在此分享給大家。

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('');

}

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

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。