rem

inapt 發布于2019-08-02 15:13 / 3240人閱讀

摘要：使用原理，，根據屏幕寬度等比壓縮網頁一前言我們在編寫網頁時，往往需要兼顧網頁在不同屏寬情況下的顯示而有時為了省事，沒時間寫新的頁面，也為了兼容考慮，這就需要使用等比壓縮了等比壓縮的核心是二正文一的使用是中新增的一個單位屬性相對長度單位，相對

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

一、前言

我們在編寫網頁時，往往需要兼顧網頁在不同屏寬情況下的顯示
而有時為了省事，沒時間寫新的頁面，也為了兼容考慮，這就需要使用等比壓縮了
等比壓縮的核心是rem

二、正文
（一）rem的使用

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



    
    
         此處的1rem即設備的默認字體大小，桌面瀏覽器默認字體大小是16px
    



    
        
            此處的1rem是12px

當然還可以在css上進行賦值，或者使用js進行動態的初始賦值

/*使用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
}

解決辦法：

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

(四) em和rem的區別

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


    
        
    
    
　　　　
        此處的1rem = 100px

(五) 的含義

那么，他有什么作用呢？
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";
 }

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

1、css代碼涉及大小的，統一使用rem進行設置
2、html頭部不能使用：
同理：當不需要等比壓縮網頁時，記得把這行代碼加上去，否則等比壓縮一直存在
原理：是根據屏寬動態的設置根節點font-size，以此進行rem的初始設置，實現對不同屏幕寬度的適配。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53983.html

Stylus插件開發教程

摘要：你還需安裝一個依賴，告訴使用者，你這個是基于哪個版本開發的，當然你可以不安裝這個依賴，那只能自己用了。開發調試在根目錄中運行在本機全局為做一個軟鏈接，如果你移動了目錄你得重新做軟鏈接。因為你在前面添加了文件事實上導入的文件是。由于Stylus的強大，它支持SCSS LESS 靈活的書寫方式，然后它不用像SCSS安裝Ruby，不是特別出名，流行的工具沒有使用它，只是在小的圈子里面挺火滴...

cyqian 2019-08-30 12:57 評論0 收藏0
【基礎】EM 還是 REM？這是一個問題！

摘要：但問題是究竟該用還是呢關于這個問題一直存在比較大的爭議。上述現象的出現，是因為是相對于當前元素字體的大小。什么是表示，它是相對于根元素的長度單位。還是在項目開發中究竟是選用還是一直以來爭議不斷。這就是前述規則中的第一條規則。簡言應用象EM 和 REM這種相對長度單位進行頁面排版是WEB開發中的最佳實踐。在頁面排版中較好應用EM 和 REM，根據設備尺寸縮放顯示元素的大小。這就使得組...

lk20150415 2019-08-29 15:07 評論0 收藏0
了解并使用CSS中的rem單位

摘要：寫了一篇文章，里面記錄了他在實際使用單位過程中的一些感受。他的解決方式充分利用了到目前為止我們遇到的三種單位。根元素的長度單位依舊采用，模塊用單位，模塊內的元素使用單位。隨后在中單位的強大之處提出了他的觀點。什么是 rem 可能在你使用收音機或者用其他音樂播放器之前，就已經聽過R.E.M.這個詞了。在這個樂隊眼中，這個詞是淺睡眠時眼球的快速轉動的縮寫，而在 css 中，rem 代表著...

BWrong 2019-08-29 11:32 評論0 收藏0
REM如何無視手機系統字號調整

摘要：經檢查發現，中的值是正常值，但是出現了一個匪夷所思的情況頁面上的以為例，在移動端內嵌中設置元素最終出來的高度竟然是。。。整個人就蒙圈了，然后突然靈光一閃，發現是系統的字號調大了。。。系統如何處理的這個展示還沒有搞清楚。。。此問題屬于REM的優化解決如下問題在移動端rem布局中，多數環境多數瀏覽器下rem的計算妥妥的沒有問題，但是部分環境，比如某些軟件內嵌的webvie...

王笑朝 2019-08-02 15:59 評論0 收藏0
REM如何無視手機系統字號調整

摘要：經檢查發現，中的值是正常值，但是出現了一個匪夷所思的情況頁面上的以為例，在移動端內嵌中設置元素最終出來的高度竟然是。。。整個人就蒙圈了，然后突然靈光一閃，發現是系統的字號調大了。。。系統如何處理的這個展示還沒有搞清楚。。。此問題屬于REM的優化解決如下問題在移動端rem布局中，多數環境多數瀏覽器下rem的計算妥妥的沒有問題，但是部分環境，比如某些軟件內嵌的webvie...

codergarden 2019-08-29 13:59 評論0 收藏0