首页 > 开发 > CSS > 正文

字体用rem在手机端和PC端显示问题

2017-09-12 09:37:55  来源: 网友分享

关于利用rem来显示字体或者直接代替px用来移动端的资料在网上看了不少了。
最好的做法应该是利用js动态更新html的font-size。
代码如下:

!(function (doc, win) {            var docEle = doc.documentElement,                    evt = "onorientationchange" in window ? "orientationchange" : "resize",                    fn = function () {                        var width = docEle.clientWidth;                        width && (docEle.style.fontSize = 20 * (width / 320) + "px");                    };            win.addEventListener(evt, fn, false);            doc.addEventListener("DOMContentLoaded", fn, false);        }(document, window));

基本在移动端的字体显示没什么大问题,但是放到PC上,由于受screen的width影响,字体会很大。
后来看到手机淘宝首页在PC上字体控制的很好,找了半天没找到原因。
关于在移动端和PC端字体都能显示OK的问题一直困扰我很久(鄙人还没有做过移动端,只是平时在看这方面资料)。
请求各位大神 平时做移动端项目 而又在PC上显示的很好(尤其是字体),有好的解决办法吗,求分享。

解决方案