移動端適配不同分辨率屏幕一般用什么方法呢？目前采用媒體查詢設置不同html的font-size

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;}}

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

回答

編輯回答

鹿惑

http://mp.weixin.qq.com/s?__b... 仔細閱讀下，不明白可以再來找我

2017年1月2日 18:07

編輯回答

舊言

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

我們在移動端的做法一般是750px的設計稿，按照一半（Retina屏幕的原因）的值來寫css。高度還是用px，寬度要做些調(diào)整，可以用百分比或者flex.我們的字體大小是固定的，因為我們追求在更大的屏幕下能夠展示更多的內(nèi)容。而不是讓字體隨著屏幕越大而變得越大。說實話，你低分辨率的屏幕都能看清的字到了高分辨屏當然能看清。其實一樓的做法我卻的也行呀

2017年7月13日 06:45

編輯回答

毀憶

你可以試試vh和vw這兩個單位

2018年1月28日 10:05

編輯回答

浪婳

前提如果你對設計稿的還原度要求不需要打到1像素級別，可以直接

<meta name="viewport" content="width=設計稿的寬度例如：750, user-scalable=no, target-densitydpi=device-dpi">

我們公司就是這么干的，然后就可以直接按設計稿上的大小寫頁面了

2018年1月17日 08:21

編輯回答

風畔

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

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

2018年6月11日 09:46