移動端應該如何動態設置字體大小？

来源:http://www.cnblogs.com/Coding--Peasant/archive/2017/06/28/7091904.html
-Advertisement-
Play Games

rem由來：font size of the root element，那麼rem是個單位，單位大小由它第一代老祖宗的font-size的大小決定。現在前端碼農們為了能在各個屏幕上看到一個健康的網頁在默默的犧牲著自己的健康，因為不僅要知道rem是個單位，更重要的是要知道怎麼能在不同解析度下呈現的頁面 ...


rem由來：font size of the root element，那麼rem是個單位，單位大小由它第一代老祖宗的font-size的大小決定。現在前端碼農們為了能在各個屏幕上看到一個健康的網頁在默默的犧牲著自己的健康，因為不僅要知道rem是個單位，更重要的是要知道怎麼能在不同解析度下呈現的頁面都很NB。

事故造成原因：
1.px單位在PC上很流行，在手機屏幕上一看，MLGB的，同樣的12px卻小的跟螞蟻似的。
2.好不容易在iPhone4上調的正常了，換個菊花牌手機，MBD不堪入目了。
3.知道了rem的用法，但是html的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 = {}));

手機淘寶很多頁面用的就是這種方法來適配終端的。




來源轉載自https://segmentfault.com/a/1190000004189237

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 初涉博客
    新人初涉博客，許個願望：每天記錄一點學習筆記，不懂得，重要的，考題等等。 ...
  • tomcat設置開機啟動
    一、windows 1. 下載tomcat 2. 進入bin目錄，查看是否存在service.dat，如果沒有自行創建 3. 打開cmd，進入tomcat>bin目錄 說明：用法: service.bat install/remove [service_name] [/user username] ...
  • java中的instanceof用法詳解
    instanceof是Java的一個二元操作符（運算符）,也是Java的保留關鍵字。它的作用是判斷其左邊對象是否為其右邊類的實例，返回的是boolean類型的數據。用它來判斷某個對象是否是某個Class類的實例。 用法： boolean result = object instanceof clas ...
  • 9天C#轉Java學習過程，自己記錄一下
    其實沒有完整的9天，就是連續每天花點時間，過程so frustrated，踩坑無數。。。下麵是學習過程的記錄 第1天 開始正式學習JavaEE，已完成： 1. Tomcat安裝； 2. Tomcat配置。完成了IIS占用的80埠停用，將Tomcat監聽埠改為80埠，然後修改hosts，增加解析 ...
  • 基於Java的REST架構風格及介面安全性設計的討論
    1.REST即表現層狀態傳遞（Representational [,rɛprɪzɛn'teʃnl] State Transfer，簡稱REST）。 （1）REST名詞解釋： 通俗來講就是資源在網路中以某種表現形式進行狀態轉移。分解開來： Resource：所指的不只是數據，而是數據和表現形式的組合； ...
  • UML簡要
    一 概述 1.什麼是UML？ Unified Modeling Language，統一建模語言，用圖形化的語言展示事物的結構，為交流與開發提供了便利。 2.UML分類 UML圖形主要有用例圖、類圖、順序圖、狀態圖、活動圖。不同的視圖從不同的角度反映系統的特征。 二 用例圖 Use Case Diag ...
  • BOM知識梳理
    學過前端開發的地球人應該都瞭解，JavaScript分為三個部分：ECMAScript(JS語言本身基礎語法)，DOM(文檔對象模型，應用程式編程介面)，BOM(瀏覽器對象模型)。 BOM，實際上與瀏覽器有關係。因此瀏覽器廠商可以按照各自的想法隨意去擴展(基於window對象的擴展)。不過，擴展歸擴 ...
  • 字元聲明
    <meta charset="utf-8">告訴瀏覽器要用utf-8來解釋，同時，保存文檔時，編碼格式也要為utf-8格式。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類