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

关于利用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上显示的很好（尤其是字体），有好的解决办法吗，求分享。

阅读 8.1k

pc与移动设备的分辩率不同，dpi也不同，也就是每英寸的像素点不一样。

咋办呢?

两种办法：
1.把文档头声明成：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml&...

问题解决了，但这不是html5了，更好的办法往下看

2.声明视口
在h5页面的<head></head>中加一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

告知页面的视口等于屏幕尺寸，这样可以让浏览器的计算的时候有个统一的参照。问题解决。

再具体的细节我也说不清了，请大神来讲讲详细原理。

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

Flexible.js在进行缩放的时候会改变所有字体大小吗？