search

Home  >  Q&A  >  body text

javascript - 字体用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上显示的很好(尤其是字体),有好的解决办法吗,求分享。

PHP中文网PHP中文网2835 days ago264

reply all(4)I'll reply

  • 天蓬老师

    天蓬老师2017-04-10 16:40:41

    https://github.com/amfe/lib-flexible
    字 用 媒体查询

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-10 16:40:41

    媒体查询,改变基本字体大小

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-10 16:40:41

    移动站用REM单位,肯定是极好的,但是REM就没必要在PC端了

    最好的解决办法是两套设计稿,pc用px,然后移动用rem

    如果非要用的话,也是可以的,你可以让页面宽度大于750的时候就固定一个html的font-size

    reply
    0
  • PHP中文网

    PHP中文网2017-04-10 16:40:41

    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">

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

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

    reply
    0
  • Cancelreply