CSS—相對單位rem-有解無憂

一、概述

rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸，rem即root em的意思，中文翻譯為根em，瀏覽器的文本尺寸一般默認為16px，即默認情況下：

1rem = 16px

rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如下代碼所示

@media only screen and (max-width: 1600px) and (min-width: 1280px){
    html{
        font-size: 14px;
    }
}
@media only screen and (max-width: 1280px) and (min-width: 960px){
    html{
        font-size: 12px;
    }
}
@media only screen and (max-width: 960px){
    html{
        font-size: 10px;
    }
}

注意，一般使用rem方案解決移動端適配問題，IOS6以上和Android2.1以上，基本覆寫所有流行的手機系統，

二、詳解

通過設定根標簽的字體尺寸，可以改變rem，從而形成一個可控的統一參考系，

rem有兩種思路，其一設定rem所代表的尺寸大小與螢屏寬度成正比，其二設定rem所代表的尺寸大小與px容易換算，方便按照設計稿寫CSS，此時可以使用媒體查詢動態修改根標簽的字體尺寸來適配，

第一種思路：設定rem的大小與螢屏寬度成正比

通過JS動態設定根標簽的字體尺寸，從而改變rem的尺寸，為了方便計算，一般將rem設定為視圖寬度的十分之一，rem可以等比例適配所有解析度終端（PC端和各種移動端）

// 獲取視圖寬度
// document.documentElement是指html根節點
// document.body是指body節點
// 因為兼容問題, 有時拿不到根節點的寬度就會拿body來頂替
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(htmlWidth);
 
// 設定html標簽的font-size為視圖寬度的十分之一
let htmlDom = document.getElementsByTagName('html')[0];
console.log(htmlDom.style.fontSize);
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
console.log(htmlDom.style.fontSize);

注意，使用rem+sass可以更好、更方便的適配各種解析度的移動端，

第二種思路：設定rem尺寸與px容易換算

瀏覽器的文本尺寸一般默認為16px，設定如下所示，使用媒體查詢動態修改根標簽的字體尺寸來適配不同解析度的終端，

html{
    font-size: 62.5%; /* 62.5% * 16px = 10px */
}

注意，一般PC瀏覽器規定字體尺寸最小支持12px，手機端不存在這個問題，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550582.html

標籤：其他

上一篇：我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

下一篇：JavaScript 運算子