html移動端頁面、圖片多少寬度最合適?
時間:2024-02-14 22:15:02 | 來源:網(wǎng)站運(yùn)營
時間:2024-02-14 22:15:02 來源:網(wǎng)站運(yùn)營
html移動端頁面、圖片多少寬度最合適?:我用的一個傻辦法,rem
首先,只需要要求美術(shù)按照6plus的分辨率來設(shè)計(jì)和出圖。
然后頁面HTML元素設(shè)置font-size:100px,接著頁面里任何需要設(shè)置尺寸的,都使用rem,因?yàn)槲以O(shè)定了font-size為100px,所以尺寸可以很容易的轉(zhuǎn)換,比如10px=.1rem
html{font-size:100px;}
×{font-size:.14rem}
接著,頁面啟動需要一個js語句,用以獲得當(dāng)前屏幕分辨率跟設(shè)計(jì)稿分辨率的比例,乘以100,去設(shè)置html的font-size,這樣頁面所有實(shí)用rem的元素都將獲得對應(yīng)的尺寸.
設(shè)計(jì)稿如果以640為寬度
var scale = $('body').width() / 640;
$('html').css('font-size', 100 * scale + 'px');
頁面啟動執(zhí)行一下就可以了,也可以在onsize事件里添加一份,這樣頁面發(fā)生變化,也會自動適應(yīng).