モバイル端末でのフォントサイズの動的設定例を詳しく解説-htmlチュートリアル-php.cn

rem 原点: ルート要素のフォントサイズ。rem は単位であり、単位サイズは第一世代の祖先の font-size のサイズによって決まります。現在、フロントエンドのプログラマーは、すべての画面で健全な Web ページを表示するために、自分自身の健全性を黙って犠牲にしています。なぜなら、レムが単位であることを知る必要があるだけでなく、さらに重要なことに、異なる解像度でページをレンダリングする方法を知る必要があるからです。非常に注意が必要です。

事故の原因:
1.px単位はPCで非常に人気があります。モバイル画面を見ると、MLGBは同じ12pxですが、アリのように小さいです。
2. iPhone 4でようやく正常に調整した後、Chrysanthemumブランドの携帯電話に変更したところ、MBDが見苦しくなりました。
3. rem の使い方は分かったけど、html の適切なフォントサイズはどれくらいですか?

それでは、これらの問題を解決しましょう。
問題を解決する前に、知りたくないかもしれないいくつかのことを理解してください (警告: これらを理解していないと、真実を知ることはできません~):
1.物理ピクセル
私たちが見るすべての画面は、肉眼では見るのが難しい小さな粒子 (物理ピクセル) で構成されています。

2. 論理ピクセル
は、コンピューター座標系の点であり、プログラムで使用できる仮想ピクセル (CSS ピクセルなど) を表します。

3. デバイスのピクセル比率 (デバイスのピクセル比率) は、DPR と呼ばれます
その値は、物理ピクセルと論理ピクセルの関係を反映しています。デバイスの DPR のサイズは、次の式を使用して計算できます。式:

DPR = 物理像素 / 逻辑像素

ログイン後にコピー

以上の概念を理解すると、CSS が PC では font-size=12px; と表示されているのに、携帯電話に切り替えると小さくなる理由がわかるでしょうか。 DPRのせいでお兄さん～。 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

はい、コンピューター画面上の 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 コアを備えたブラウザーと Web ビューのみに適用されます)。 🎜🎜🎜🎜 また、インターネット上で rem の動的設定に関する記事をたくさん読みました。一般的に使用されている記事をいくつか紹介します。 🎜🎜🎜 🎜🎜🎜 まず、メディアクエリを使用して HTML のフォントサイズを設定します。

<span style="font-size: 18px"><code>!<span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">win, lib) {<span class="hljs-keyword">var timer,
        doc     = win.document,
        docElem = doc.documentElement,

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

ログイン後にコピー

🎜 🎜2番目に、jsを使用して🎜🎜rrreee🎜🎜を動的に設定します。私が言いたいのは最後の方法です。現時点ではこれがより良い実装方法だと思います: 🎜🎜🎜JSを使用して現在のデバイスのDPRを計算します。それをHTMLタグに動的に設定し、HTMLのfont-sizeを動的に設定し、CSSセレクターを使用してDPRに応じて異なるDPRでフォントサイズを設定します（この方法は非常に良いです〜）。 🎜🎜りー

以上がモバイル端末でのフォントサイズの動的設定例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。