如何使移动设备字体大小自适应

心已赠人 2022-01-31 00:01 431阅读 0赞

**rem由来**：font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的font-size的大小决定。

**像素：**  
1、物理像素(physical pixel)  
我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。

2、逻辑像素  
是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

3、设备的像素比(device pixel ratio)简称DPR  
它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：

DPR = 物理像素 / 逻辑像素

了解了上面这些概念，就可以知道，为什么css在pc上写着 font-size=12px 但是换到手机上却变小了？这是因为DPR。  
在电脑屏幕上的DPR是1，但是手机却不同，它可能是2，也可能是3。

**获取设备DPR的方法有：**  
1、在JavaScript中，通过window.devicePixelRatio来获取；  
2、在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

**几个常用的动态设置rem的方法：**  
一、用媒体查询来设置html的font-size：

@media screen and (min-width: 320px) {
        html {font-size: 14px;}
    }
     
    @media screen and (min-width: 360px) {
        html {font-size: 16px;}
    }
     
    @media screen and (min-width: 400px) {
        html {font-size: 18px;}
    }
     
    @media screen and (min-width: 440px) {
        html {font-size: 20px;}
    }
     
    @media screen and (min-width: 480px) {
        html {font-size: 22px;}
    }
     
    @media screen and (min-width: 640px) {
        html {font-size: 28px;}
    }

二、用js来动态设置：

!(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));

三、利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的font-size，利用css的选择器根据DPR来设置不同DPR下的字体大小（是我认为目前比较好的实现方法）

!function(win, lib) {
        var timer,
            doc     = win.document,
            docElem = doc.documentElement,
    
            vpMeta   = doc.querySelector('meta[name="viewport"]'),
            flexMeta = doc.querySelector('meta[name="flexible"]'),
     
            dpr   = 0,
            scale = 0,
     
            flexible = lib.flexible || (lib.flexible = {});
     
        // 设置了 viewport meta
        if (vpMeta) {
     
            console.warn("将根据已有的meta标签来设置缩放比例");
            var initial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
     
            if (initial) {
                scale = parseFloat(initial[1]); // 已设置的 initialScale
                dpr = parseInt(1 / scale);      // 设备像素比 devicePixelRatio
            }
     
        }
        // 设置了 flexible Meta
        else if (flexMeta) {
            var flexMetaContent = flexMeta.getAttribute("content");
            if (flexMetaContent) {
     
                var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),
                    maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);
     
                if (initial) {
                    dpr = parseFloat(initial[1]);
                    scale = parseFloat((1 / dpr).toFixed(2));
                }
     
                if (maximum) {
                    dpr = parseFloat(maximum[1]);
                    scale = parseFloat((1 / dpr).toFixed(2));
                }
            }
        }
     
        // viewport 或 flexible
        // meta 均未设置
        if (!dpr && !scale) {
            // QST
            // 这里的 第一句有什么用 ?
            // 和 Android 有毛关系 ?
            var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),
                _dpr = win.devicePixelRatio;
     
            // 所以这里似乎是将所有 Android 设备都设置为 1 了
            dpr = u ? ( (_dpr >= 3 && (!dpr || dpr >= 3))
                            ? 3
                            : (_dpr >= 2 && (!dpr || dpr >= 2))
                                ? 2
                                : 1
                      )
                    : 1;
     
            scale = 1 / dpr;
        }
     
        docElem.setAttribute("data-dpr", dpr);
     
        // 插入 viewport meta
        if (!vpMeta) {
            vpMeta = doc.createElement("meta");
             
            vpMeta.setAttribute("name", "viewport");
            vpMeta.setAttribute("content",
                "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
     
            if (docElem.firstElementChild) {
                docElem.firstElementChild.appendChild(vpMeta)
            } else {
                var div = doc.createElement("div");
                div.appendChild(vpMeta);
                doc.write(div.innerHTML);
            }
        }
     
        function setFontSize() {
            var winWidth = docElem.getBoundingClientRect().width;
     
            if (winWidth / dpr > 540) {
                (winWidth = 540 * dpr);
            }
     
            // 根节点 fontSize 根据宽度决定
            var baseSize = winWidth / 10;
     
            docElem.style.fontSize = baseSize + "px";
            flexible.rem = win.rem = baseSize;
        }
     
        // 调整窗口时重置
        win.addEventListener("resize", function() {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
        }, false);
     
         
        // 这一段是我自己加的
        // orientationchange 时也需要重算下吧
        win.addEventListener("orientationchange", function() {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
        }, false);
     
     
        // pageshow
        // keyword: 倒退 缓存相关
        win.addEventListener("pageshow", function(e) {
            if (e.persisted) {
                clearTimeout(timer);
                timer = setTimeout(setFontSize, 300);
            }
        }, false);
     
        // 设置基准字体
        if ("complete" === doc.readyState) {
            doc.body.style.fontSize = 12 * dpr + "px";
        } else {
            doc.addEventListener("DOMContentLoaded", function() {
                doc.body.style.fontSize = 12 * dpr + "px";
            }, false);
        }
      
        setFontSize();
     
        flexible.dpr = win.dpr = dpr;
     
        flexible.refreshRem = setFontSize;
     
        flexible.rem2px = function(d) {
            var c = parseFloat(d) * this.rem;
            if ("string" == typeof d && d.match(/rem$/)) {
                c += "px";
            }
            return c;
        };
     
        flexible.px2rem = function(d) {
            var c = parseFloat(d) / this.rem;
             
            if ("string" == typeof d && d.match(/px$/)) {
                c += "rem";
            }
            return c;
        }
    }(window, window.lib || (window.lib = {}));

手机淘宝很多页面用的就是这种方法来适配终端的。

**结束语：**  
想要适配好不同终端就一定要理解物理像素、逻辑像素、DPR，并弄清楚他们之间的关系。

发表评论取消回复

表情：

评论列表（有 0 条评论，431人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android新增AppCompatTextView自适应字体大小和文本宽度

Android新增AppCompatTextView自适应字体大小和文本宽度 Android的supportv7包中新增了一个AppCompatTextView，它

超、凢脫俗/ 2023年10月17日 23:01/ 0 赞/ 80 阅读

相关 Android TextView利用measureText自适应文本字体大小宽度

Android TextView利用measureText自适应文本字体大小宽度常常有这种情况，UI设计师限定一个文本TextView的宽度值比如80dip，但

本是古典何须时尚/ 2023年10月17日 19:03/ 0 赞/ 55 阅读

相关自适应页面如何布局以及字体大小如何设置？

页面自适应，是指页面内容自动适应屏幕大小。实现自适应的方法有多种： 1、简易场景实现自适应：浮动、页面居中、设置百分比属性、自动匹配大小。这样在页面宽度发生变化时，能利用以上

水深无声/ 2022年12月08日 05:42/ 0 赞/ 746 阅读

相关普通web网页自适应移动设备屏幕

<mate>标签的设置如下 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <me

末蓝、/ 2022年08月26日 00:45/ 0 赞/ 221 阅读

相关移动wap input登陆框自适应屏幕大小

<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/h

快来打我*/ 2022年08月23日 11:53/ 0 赞/ 192 阅读

相关移动设备&Media Queries,适应移动设备大小

viewport设置适应移动设备屏幕大小为了解决移动版的屏幕分辨率大小，专门定义了虚拟窗口，并自定义窗口的大小或缩放功能 \-Android Browse

墨蓝/ 2022年06月08日 07:36/ 0 赞/ 216 阅读

相关 css文件如何使背景图片大小适应div的大小

对背景图片设置属性：background-size：cover;可以实现背景图片适应div的大小。 background-size有3个属性： 1. auto：当使用该属

Dear 丶/ 2022年05月12日 08:30/ 0 赞/ 248 阅读

相关如何使移动设备字体大小自适应

rem由来：font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的font-size的大小决定。像素： 1、物理像素

心已赠人/ 2022年01月31日 00:01/ 0 赞/ 432 阅读

相关如何使easyui的datagrid 高度自适应

如何使easyui的datagrid 高度自适应？　　最开始使用easyui的datagrid加载数据时，对其设置的高度都是固定值，数据较多时table表现为滚动条形式。某

柔光的暖阳◎/ 2021年09月30日 07:22/ 0 赞/ 940 阅读

相关 HTML中使背景图片自适应浏览器大小

由于<body>标签的图片不能够拉伸，解决办法： 1、图片不够大，又background属性不能拉伸图片； 2、只能用个div，把其z-index值设为负，并使这个di

电玩女神/ 2021年06月24日 15:56/ 0 赞/ 514 阅读