rem

時間 2019-12-04

標籤 rem 简体版

原文原文鏈接

使用rem原理，62.5%，根據屏幕寬度等比壓縮網頁css

1、前言html

咱們在編寫網頁時，每每須要兼顧網頁在不一樣屏寬狀況下的顯示
而有時爲了省事，沒時間寫新的頁面，也爲了兼容考慮，這就須要使用等比壓縮了
等比壓縮的核心是rem

2、正文
（一）rem的使用css3

rem是css3中新增的一個單位屬性
相對長度單位，相對於根元素（即html元素）font-size計算值的倍數
rem在桌面瀏覽器上的初始值是16px（即1rem=16px）

<!-- rem的初始值 -->
<html style="">
    <head></head>
    <body>
        <div style="font-size:1rem"> 此處的1rem即設備的默認字體大小，桌面瀏覽器默認字體大小是16px
    </body>
</html>

<html style="font-size:12px">
    <head>
        <body>
            <div style="font-size:1rem">此處的1rem是12px</div>
        </body>
    </head>
</html>

固然還能夠在css上進行賦值，或者使用js進行動態的初始賦值chrome

/*使用css進行rem的賦值*/
html{
    font-size:14px;  // 此處的初始賦值表示1rem=14px
}

（二）rem的62.5%和10px的區別瀏覽器

在桌面瀏覽器上font-size的默認值是16px；
可知font-size：62.5%；即表示10px；（16*62.5%=10px）
那麼font-size：62.5%；和font-size：10px的區別是什麼呢？

比較好的解釋：
    桌面瀏覽器默認字體是16px，這種狀況下設置成具體像素大小或對應的百分比看起來效果是同樣的；
     可是其餘類型的設備的默認字體大小不必定是16px
     特別是高分辨率的設備，16px大小的字體在他們上邊看起來會很是小，因此不能在body上設置具體像素值，設置成百分比，能夠按照設備的基準字體大小給編寫的網頁設置好最合適的用戶瀏覽的字體大小
     最重要的不是屏幕實際的像素大小，屏幕上文字的可讀性纔是最重要的

（三）正確的rem使用方法
如上文所述，使用font-size：62.5%更好佈局

html{
    font-size:62.5%;
}

然而坑無處不在
新的問題：咱們開發經常使用的chrome瀏覽器，支持的最小字體大小是12px字體

/*rem在不一樣瀏覽器下的結果*/
html{
    font-size:62.5%;
}
header{
    height:8rem  //在其餘瀏覽器表示80px，在chorme上表示96px
}

解決辦法：scala

font-size:625%
    1rem = 100px 
    以此爲單位進行換算，能夠避免出現以上的問題

(四) em和rem的區別設計

rem是相對於根節點的font-size計算
em是相對於父節點的font-size計算

<html>
    <head>
        <style>
            html{ 
                 font-size: 625%  
            }
            .child{
                 height: 1rem;
                 width: 1rem;  
            }  
        </style>
    </head>
    <body>
　　　　<!-- rem是相對於根節點的font-size計算 -->
        <div class="child">此處的1rem = 100px</div>

　　　　<!-- em是相對於父節點的font-size計算 -->
        <div style="font-size:10px;"><!-- 父元素的字體大小是10px-->
            <div style="height:1em;width:1em;"></div><!-- 因此子元素的em是1em=10px；-->
        </div>
    </body>
</html>

(五) <meta name="viewport">的含義code

<!-- html頭部通常會加這麼一行代碼 -->
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    </head>    
</html>

那麼，他有什麼做用呢？
viewport用於移動端自適應
但若是是瀏覽器流動佈局的網頁那狀況會很是糟糕，設想一個寬度爲30%的側邊欄對於320px手機屏幕而言也就96px，只能容納8個12px的漢字，可閱讀性很是差。
爲了讓手機也能得到良好的網頁瀏覽體驗，Apple找到了一個辦法：在移動版(iOS)的Safari中定義了viewport meta標籤①，它的做用就是建立一個虛擬的窗口(viewport)，並且這個虛擬窗口的分辨率接近於桌面顯示器

width 設置layout viewport 的寬度，爲一個正整數，或字符串"width-device"
initial-scale 設置頁面的初始縮放值，爲一個數字，能夠帶小數
minimum-scale 容許用戶的最小縮放值，爲一個數字，能夠帶小數
maximum-scale 容許用戶的最大縮放值，爲一個數字，能夠帶小數
height 設置layout viewport 的高度，這個屬性並不重要，不多使用
user-scalable 是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許

(六) 根據屏幕寬度等比壓縮網頁

//根據屏幕計算設計rem的標準中
 var documentWidth = document.documentElement.offsetWidth;

 if(documentWidth > 1268 ){
    document.documentElement.style.fontSize = documentWidth/166 + "px";
 }

使用上邊代碼，能夠根據屏幕寬度等比壓縮網頁
但有兩個前提：

一、css代碼涉及大小的，統一使用rem進行設置
二、html頭部不能使用：<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
同理：當不須要等比壓縮網頁時，記得把這行代碼加上去，不然等比壓縮一直存在
原理：是根據屏寬動態的設置根節點font-size，以此進行rem的初始設置，實現對不一樣屏幕寬度的適配。

1. rem
2. react適配 rem px to rem
3. CSS-rem
4. css3--rem
5. css rem
6. Rem & Viewport
7. rem適配佈局（rem+less+媒體查詢和 rem+flexible.js）
8. vue px 轉rem vue px轉換爲rem
9. rem佈局
10. rem 單位
更多相關文章...

相關標籤/搜索

每日一句

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