鍍金池/ 問答/HTML5  網(wǎng)絡(luò)安全  HTML/ h5頁面移動端用rem設(shè)置字體,字體不按照正常比例縮放

h5頁面移動端用rem設(shè)置字體,字體不按照正常比例縮放

項(xiàng)目中ui給到750px的設(shè)計(jì)圖
用rem布局 100px為1rem
設(shè)置黑色字體大小為.22rem 設(shè)置灰色字體為.16rem
在750的屏幕上字體,頁面布局正常。
圖片描述

但是,用谷歌瀏覽器手機(jī)模擬,到375的屏幕上,字體縮放有問題,并且,造成頁面布局紊亂
圖片描述

回答
編輯回答
嫑吢丕

chrome瀏覽器有12px的最小字體限制。

2018年1月17日 23:32
編輯回答
初念

你可以使用JS動態(tài)設(shè)置html的font-size, 來適應(yīng)頁面分辨率的變化

2017年11月27日 15:37
編輯回答
純妹

使用 rem 布局,如果你想文字的大小隨著屏幕分辨率的改變而改變,可以使用媒體查詢 media 設(shè)置不同的 html 絕對大小的值

或者引入 lib-flexible ,不過這只是一種過渡方案,官方已經(jīng)不再推薦,轉(zhuǎn)而推薦使用 viewport 來替代此方案

2017年9月18日 17:28
編輯回答
不歸路

提供下viewport設(shè)置和html的fontsize設(shè)置看下

2018年8月31日 01:50
編輯回答
厭遇

用rem的情況下,屏幕尺寸變化,根標(biāo)簽的font-size要重新計(jì)算啊

2018年4月19日 08:42