亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

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

5 回答

?
SMILET

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)


查看完整回答
1 反對 回復 2019-03-15
?
郎朗坤

TA貢獻1921條經驗 獲得超9個贊

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

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


查看完整回答
1 反對 回復 2019-03-15
?
千萬里不及你

TA貢獻1784條經驗 獲得超9個贊

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


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

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


查看完整回答
反對 回復 2019-03-15
?
子衿沉夜

TA貢獻1828條經驗 獲得超3個贊

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


查看完整回答
反對 回復 2019-03-15
  • 5 回答
  • 0 關注
  • 1898 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號