5 回答

TA貢獻1796條經驗 獲得超4個贊
基本原理就是你這樣,不同屏幕寬度設置不同的font-size,你可以用js實現,比如以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)

TA貢獻1921條經驗 獲得超9個贊
rem布局要根據屏幕大小動態設置html的font-size的,淘寶的flexiable.js就是這樣子的,然后根據你的設計稿,把所有的px的單位按照設計稿的寬度轉換成rem。這樣子的結果就是在不同分辨率的屏幕上,就像縮放一樣。整個屏幕展示的內容信息量在所有分辨率下都是一樣。
我們在移動端的做法一般是750px的設計稿,按照一半(Retina屏幕的原因)的值來寫css。高度還是用px,寬度要做些調整,可以用百分比或者flex.我們的字體大小是固定的,因為我們追求在更大的屏幕下能夠展示更多的內容。而不是讓字體隨著屏幕越大而變得越大。說實話,你低分辨率的屏幕都能看清的字到了高分辨屏當然能看清。其實一樓的做法我卻的也行呀

TA貢獻1784條經驗 獲得超9個贊
前提 如果你對設計稿的還原度要求不需要打到1像素級別,可以直接
<meta name="viewport" content="width=設計稿的寬度例如:750, user-scalable=no, target-densitydpi=device-dpi">
我們公司就是這么干的,然后就可以直接按設計稿上的大小寫頁面了
添加回答
舉報