首頁猿問移動(dòng)端適配不同分辨率屏幕一般用什么...

移動(dòng)端適配不同分辨率屏幕一般用什么方法呢？目前采用媒體查詢?cè)O(shè)置不同html的font-size

JavaScript

慕慕森 2019-03-07 14:11:00

html { width:100%; height:100%; font-size:12px; line-height:1.5;}@media only screen and (min-width:320px) { html {font-size:12px;}}@media only screen and (min-width:375px) { html {font-size:14px;}}@media only screen and (min-width:412px) { html {font-size:16px;}} 目前基本是這樣的寫法，針對(duì)不同分辨率設(shè)置不一樣的font-size，直接設(shè)置html，也就改變了rem，所以和px相關(guān)的就可以直接用rem解決，基本沒有什么大問題，當(dāng)然這里媒體查詢只有三個(gè)屏幕，還可以更多，但我懶得弄了。最近發(fā)現(xiàn)在大屏安卓手機(jī)上字體很大，然后覺得可能這個(gè)方法不是很合理，不過ios全平臺(tái)一直很好?？戳艘恍┪恼潞?，發(fā)現(xiàn)很困惑，的確有幾個(gè)不一樣的方法，好多人推薦淘寶的flexable.js，但我看了下，覺得繁瑣，能用css解決的就不要用js，所以懶得嘗試，不知道是不是真的很好。然后還看到一段代碼html,body {font-size: calc(100vw/7.5);}，覺得很簡(jiǎn)短，但不知道是否合理。所以想看看大家一般怎么適配不同分辨率的手機(jī)的啊，固定字體的話不合理，小手機(jī)偏大，大手機(jī)高分屏看不清，而且也不怎么搞得懂dpr啥的，大家有沒有好的簡(jiǎn)單點(diǎn)的什么方法啊。

查看完整描述

5 回答

SMILET

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

基本原理就是你這樣，不同屏幕寬度設(shè)置不同的font-size，你可以用js實(shí)現(xiàn)，比如以iphone6 1rem=40px 為基準(zhǔn)，i6的css width 為375，然后求不同終端屏幕寬度和i6的比例，這樣設(shè)置font-size比用媒體查詢細(xì)致一點(diǎn)：

(function(doc,win){

var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function(){

var clientWidth = docEl.clientWidth;

docEl.style.fontSize = 40 * (clientWidth / 375) + 'px';

};

if(!doc.addEventListener){

return;

}

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

recalc()

})(document, window)

1 反對(duì) 回復(fù) 2019-03-15

郎朗坤

TA貢獻(xiàn)1921條經(jīng)驗(yàn) 獲得超9個(gè)贊

rem布局要根據(jù)屏幕大小動(dòng)態(tài)設(shè)置html的font-size的，淘寶的flexiable.js就是這樣子的，然后根據(jù)你的設(shè)計(jì)稿，把所有的px的單位按照設(shè)計(jì)稿的寬度轉(zhuǎn)換成rem。這樣子的結(jié)果就是在不同分辨率的屏幕上，就像縮放一樣。整個(gè)屏幕展示的內(nèi)容信息量在所有分辨率下都是一樣。

我們?cè)谝苿?dòng)端的做法一般是750px的設(shè)計(jì)稿，按照一半（Retina屏幕的原因）的值來寫css。高度還是用px，寬度要做些調(diào)整，可以用百分比或者flex.我們的字體大小是固定的，因?yàn)槲覀冏非笤诟蟮钠聊幌履軌蛘故靖嗟膬?nèi)容。而不是讓字體隨著屏幕越大而變得越大。說實(shí)話，你低分辨率的屏幕都能看清的字到了高分辨屏當(dāng)然能看清。其實(shí)一樓的做法我卻的也行呀

1 反對(duì) 回復(fù) 2019-03-15