鍍金池/ 問(wèn)答/HTML/ 移動(dòng)端rem布局下,針對(duì)iPhone6 的字體是12px,如何適配更小的屏幕?

移動(dòng)端rem布局下,針對(duì)iPhone6 的字體是12px,如何適配更小的屏幕?

如題,設(shè)計(jì)稿針對(duì)iPhone6的字體大小設(shè)置的12px;如果用字體大小采用rem,由于瀏覽器限制,在320的屏幕上font-size的計(jì)算值還是12px,這種情況如何處理呢?難道要針對(duì)不同的屏幕寬度動(dòng)態(tài)計(jì)算transform:scale?

回答
編輯回答
久不遇

iphone上我記得是可以顯示12px以下的啊,而安卓一般都360比較多,大部分國(guó)產(chǎn)機(jī)默認(rèn)瀏覽器以及uc qq也是支持12以下的,不過(guò)chrome 從版本54開(kāi)始才支持小于12px。

非要顯示12px以下最更簡(jiǎn)單:比如說(shuō)你本來(lái)要寫(xiě)1.2rem,你直接給2.4rem。然后將相應(yīng)元素縮小一倍就行了,不需要檢測(cè)分辨率

2017年3月30日 00:48
編輯回答
玄鳥(niǎo)

利用transform使用縮放,iOS的最小字體就是12px,不能在px上更小了。這是例子,可參考。DEMO 記得注意兼容性前綴。

2017年4月4日 22:59
編輯回答
安于心

如果使用vw呢?

2017年3月6日 17:44
編輯回答
膽怯

我怎么就不相信手機(jī)上最小的的 font-size 還是 12px 呢……

2018年7月23日 20:51