web前端_rem移動適配

時間 2019-11-10

標籤 web 前端 rem 移動適配欄目 HTML 简体版

原文原文鏈接

前言javascript

這裏只說rem原理及原理的一個基本測試。so，須要rem相關的js代碼或者css media配置，請移步google|baidu。css

1.rem爲什麼物html

首先rem是個什麼鬼？長的有點像文字單位em。答案是~rem也是一種度量單位，經常使用於適配各類移動端適配上。java

2.rem怎麼用chrome

rem怎麼用，首先就得知道rem的原理。ide

其實rem，就是根據html標籤font-size大小而改變的一個值。好比當你將Html的font-size設置爲100px，那麼這是你設置1rem就等於100px了。就是這麼簡單，上事例代碼：測試

<!DOCTYPE html>
<html>
<head>
    <title>rem原理</title>
    <meta charset="utf-8">
    <style type="text/css">
        html {
        }
        body {
            font-size: 16px;
        }
        .result {
            width: 1rem;
            height: 1rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        rem原理：<br>
        rem是基於html的font-size進行調整的，能夠根據屏幕的寬度動態設置html的font-size值，從而保證rem對應的比例正確<br>(如chrome默認爲16px，就是1:16，設置爲x，則是1:x)
    </div>
    <button onclick="changeFontSize(100)">font-size:100</button>
    <button onclick="changeFontSize(50)">font-size:50</button>
    <div class="result"></div>

    <script type="text/javascript">
        const doc = document.documentElement;
        function changeFontSize(size) {
            doc.style.fontSize = size + 'px';
        }
    </script>
</body>
</html>

View Code

原理就是這樣。經過改變html根font-szie的值來設置rem的值。網站

3.因此這是怎麼適配到移動端？google

答案是~經過對window對象獲取寬度而後除以設計圖的寬度，最後乘以一個你但願的比例。這樣，你以後的元素就能夠用設置圖的寬高除以你設置的比例+rem單位來設置了。好比屏幕寬320，你設計圖寬600，你的比例設爲100，那麼html的font-size就設置爲 320*100/600 px，而後你的元素在設計圖寬60px，你只須要轉成rem，即把它設成 60/100 rem便可。將動態設置的代碼寫成js執行(網上自行搜索)，以後就一勞永逸了。spa

4.這樣就完美了？

不。不是的。這樣作在普通屏幕上是已經完美了。可是蘋果手機多是retina屏幕，因此還須要作進一步的兼容。就是你的屏幕寬度須要*你的手機window.devicePixelRatio(設備的dpr)。而後，基本就完美了~

貼個感受不錯的rem介紹網站 :)