rem原理

時間 2019-12-01

標籤 rem 原理简体版

原文原文鏈接

rem佈局實際上就是實現等比縮放
試想，若是咱們的元素在不一樣的屏幕上能夠按照相同的比例來進行縮放就行了。css

rem的計算原理：

試想把屏幕平均分紅10份，那麼每一份就是1/10，咱們選擇每一份的大小是1rem，那麼一個5*(1/10)的大小就佔屏幕大小的50%，這就是remhtml

咱們設計稿的寬度是750px，那麼對於設計稿上寬度爲600px的一個元素，它的rem值是怎麼計算呢？

上面咱們把屏幕分紅了10份，屏幕寬度就是10rem
設計稿上600px元素在設計稿上佔的比例是 600/750，將這個比例應用到屏幕上，屏幕的寬度是10rem，那麼，這個元素在屏幕上佔用的rem就是 600/750*10rem
因此，公式就是設計稿元素尺寸/設計稿寬度*以rem爲單位的屏幕寬度

通常1rem寬度，是html根字體的大小

要根據屏幕大小動態設置跟字體的大小vue

處理rem佈局中的字體

首先針對於文字內容比較多的網頁，是不適合用rem佈局的，由於這時候大屏的用戶能夠本身選擇想要更大的字體，仍是更多的內容，若是使用了rem，這個效果就不能夠實現了。因此像是百度知道這種都不行，一些偏向圖片內容多一些的例如淘寶，就能夠。git

可是字體的大小和寬度是不能夠用rem來肯定的，字體大小和寬度不成線性關係。
解決辦法：在body上作修正*
html {fons-size: width / 100}
body {font-size: 16px}github

使用實例:

html:iphone

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>rem佈局</title>
</head>
<body>
    <noscript>開啓JavaScript，得到更好的體驗</noscript>

    <div class="p1">
        寬度爲屏幕寬度的50%，字體大小1.2em
        <div class="s1">
            字體大小1.2.em
        </div>
    </div>

    <div class="p2">
        寬度爲屏幕寬度的40%，字體大小默認
        <div class="s2">
            字體大小1.2em
        </div>
    </div>
</body>
</html>

CSS佈局

html {
    font-size: 32px; /* 320/10 */
}/*針對320屏幕，分紅10份*/
body {
    font-size: 16px; /* 修正字體大小 */
    /* 防止頁面過寬 ,頁面過寬的時候取780居中*/
    margin: auto;
    padding: 0;
    width: 10rem;
    /* 防止頁面過寬 */
    outline: 1px dashed green;
}

/* js被禁止的回退方案 ,js被用戶禁止的時候，使用媒體查詢針對各個屏幕進行設置*/
@media screen and (min-width: 320px) {
    html {font-size: 32px}
    body {font-size: 16px;}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    html {font-size: 48px}
    body {font-size: 18px;}
}
@media screen and (min-width: 641px) {
    html {font-size: 64px}
    body {font-size: 20px;}
}

noscript {
    display: block;
    border: 1px solid #d6e9c6;
    padding: 3px 5px;
    background: #dff0d8;
    color: #3c763d;
}
/* js被禁止的回退方案 */

.p1, .p2 {
    border: 1px solid red;
    margin: 10px 0;
}

.p1 {
    width: 5rem;
    height: 5rem;

    font-size: 1.2em; /* 字體使用em */
}

.s1 {
    font-size: 1.2em; /* 字體使用em */
}

.p2 {
    width: 4rem;
    height: 4rem;
}
.s2 {
    font-size: 1.2em /* 字體使用em */
}

js:post

var documentElement = document.documentElement;

function callback() {
    var clientWidth = documentElement.clientWidth;
    // 屏幕寬度大於780，不在放大
    clientWidth = clientWidth < 780 ? clientWidth : 780;//針對例如pc這種屏幕過大的，設置寬度是780，兩邊居中留空白
    documentElement.style.fontSize = clientWidth / 10 + 'px';//動態設置屏幕大小除以10爲根html字體大小。
}

document.addEventListener('DOMContentLoaded', callback);
window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);

步驟總結：

肯定設計稿寬度，通常是750px，選取一個手機設備的寬度作基準（例如iphone6 375px, 處理好再拓展其餘機型）
限制使用rem佈局（由於好多大牛公司都用rem，說明仍是又必定的道理的），選取一個font-size的值作基數
按照設計稿上的元素，計算每一個元素在界面上的尺寸設計稿標註尺寸/設計稿橫向尺寸*10rem = 元素實際rem爲單位的css尺寸，這一步不用手動計算，能夠經過postcss的px2rem插件計算。
使用js適配各類型號的設備寬度，設置到根html上
(1),動態設置viewport的scale,
var scale = 1/dpr; //dpr是由設備決定的設備像素比
並動態設置meta標籤中的各項的值 init-scale = maximum-scale = minimun-scale = scale
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximun-scale=' + scale + ', minimun-scale=' + scale + ', user-scalable=no');
dpr = 2時， scale = 1/dpr = 0.5;
dpr = 3時，scale = 1/dpr = 0.333...字體

最後生成的標籤是這樣
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimun=0.5, user-scalable=no"></meta>this

（2），動態計算font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth /10 + 'px';
這裏選取將但是窗口寬度分紅了10份，每份就是一個rem，因此整個屏幕就是10rem，1rem = 根html font-size的值。
<html data-dpr="2" style="font-size: 75px;">

項目鏈接: 點這裏

相關標籤/搜索

每日一句

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