mobile_5 種常見適配_設備兼容

時間 2019-11-08

標籤 mobile 常見適配設備兼容欄目無線简体版

原文原文鏈接

em 參照自己元素的 font-sizejavascript

rem 參照 html 根元素的 font-sizecss

1. rem 適配（同一元素，在不一樣設備上，效果同樣）html

適用狀況：當頁面大於獨立像素375 時，或者頁面元素不少時java

原理

頁面中的元素，統一單位 rem（字體使用 px 而不使用 rem）面試

根元素字體大小設置成整個屏幕的寬（1 rem = 375px），而後元素的 css 像素根據佔據屏寬，使用 rem app

// 適配 (手寫 面試題)
            (function(){ /* 1. 建立 style 標籤 */ var styleNode = document.createElement("style"); /* 2. 給 style 標籤添加內容 (屏幕分份, 大多數公司 16 份) */ styleNode.innerHTML = "html {"+ "font-size:"+width/16+"px !important"+ "}"; /* IPhone 6 的 font-size: 23.4375px */ /* 3. 把 style 標籤追加到 head 標籤裏 */ document.head.appendChild(styleNode); }());

缺點：需換算元素佔屏幕的 rem佈局

2. viewport 適配字體

適用狀況：當 ui 設計圖小於獨立像素 375時。避免換算，直接使用 css 像素單位 pxui

缺點：圖片可能失真；打破完美佈局視口。spa

原理：

讓佈局視口等於設計圖紙的 width

方案1

（直接讓meta 標籤中 content 的佈局視口 width=320px 安卓不支持）

方案2
（放大操做 initial-scale=375/320，佈局視口變小）

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
</head>




<script type="text/javascript">
    var clientWidth = document.documentElement.clientWidth;

    var targetWidth = 320;

    var scale = clientWidth/targetWidth;

    var metaNode = 
    document.querySelector("meta[name='viewport']");

    metaNode.content = "initial-scale="+scale+
                       ", user-scalable=no";
</script>

3. 百分比適配

zepto 移動端實戰項目。

適用狀況：頁面元素少。

4. 媒體選擇器（響應式佈局）

不一樣屏幕，自適應呈現出不一樣的佈局。

5. 具體像素值

適用狀況：當 ui 設計圖未標明寬度，以及元素的具體位置時。

關鍵點：

結合媒體選擇器在不一樣狀況下，使用 2x 圖和 3x 圖（dpr=2時使用2x圖，dpr=3時使用3x圖）
元素不可直接使用 ui 設計圖的標註px，必須問清楚 dpr 是多少，而後算出具體的 css 像素
- css 像素 = 物理像素 / dpr = 位圖像素/dpr = 設計圖px/dpr
- css 像素 = 128/2 = 64 好比 128px*128px 的圖片的 css 像素應該是 64 px

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。