您的位置：首頁洛壹視點網(wǎng)站開發(fā)技術(shù) 移動端適配方案（rem）

移動端適配方案（rem）

發(fā)表日期：2020-08-14 文章編輯：洛壹網(wǎng)絡文章來源：深圳網(wǎng)站建設(shè)

移動端適配方案（rem）

適配原理：通過 js 動態(tài)設(shè)置 html 的 font-size

1.設(shè)置 meta viewport 屬性

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

2.添加動態(tài)設(shè)置 html 的 font-size 的 js

(function(designWidth, maxWidth) {
    var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement("style"),
    tid;
 
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 750;
        width > maxWidth && (width = maxWidth); //設(shè)置最大寬度
        width < 375 && (width = 375); //設(shè)置最小寬度
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }
 
    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 設(shè)置好后才能執(zhí)行 refreshRem，不然 refreshRem 會執(zhí)行2次；
    refreshRem();
 
    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止執(zhí)行兩次
        tid = setTimeout(refreshRem, 300);
    }, false);
 
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 瀏覽器后退的時候重新計算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
 
    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);

上一篇：網(wǎng)站建設(shè)中網(wǎng)站技術(shù)開發(fā)語義化標簽的好處

下一篇：sass 進階使用文檔

相關(guān)內(nèi)容

幫助中心版本更新記錄

純靜態(tài)和偽靜態(tài)的區(qū)別？

我們從以下三個方面，對比純靜態(tài)和偽靜態(tài)兩種靜態(tài)頁面生成方式，逐一展開分析。

用JS的正則表達式如何判斷輸入框內(nèi)為中文或者是英文數(shù)字，或者是三者混編

css制作扇形

純CSS3文字Loading動畫特效

PhpStorm 2022.1 EAP＃3 發(fā)布：增強多行和嵌套數(shù)組形狀

PhpStorm 2022.1 EAP 3 在 PHPDoc 和屬性中添加了對多行和嵌套數(shù)組形狀的完全支持：在這種情況下，可以使用數(shù)組形狀注釋定義數(shù)組結(jié)構(gòu)，以獲得鍵的代碼補全并推斷值的類型。

2022年P(guān)HP的現(xiàn)狀以及最新版本帶來的特性

PHP作為Web界第一大語言近年來熱度不夠，但是這幾年的進步和成長卻沒有中斷。在2022伊始，我們來一起學習一下目前PHP的現(xiàn)狀以及最新版本帶來的特性。

網(wǎng)站開發(fā)技術(shù)分享：Linux程序前臺后臺切換詳解

Linux程序前臺后臺切換：在Linux終端運行命令的時候，在命令末尾加上 & 符號，就可以讓程序在后臺運行Ubuntu$">root@Ubuntu$ ./tcpserv01 &

如何分辨python換行符，Python換行符的多行模式

Python 的正則表達式支持多行模式，將每行文字分別匹配。然而各種操作系統(tǒng)里，換行符的表示法各不相同，會導致 Python 不能正確使用多行模式。