rem

囧囧圖圖發表於2019-03-01
REM

技術有限,總結一下他人,自己可以更好的理解

一, 前言: 幾個單位對比 REM使用詳解

  • px：相對長度單位,畫素px是相對於顯示器螢幕解析度而言的

  • em：相對單位,繼承父節點（層層繼承,傳遞)基準點為父節點字型的大小,如果自身定義了font-size按自身來計算(瀏覽器預設字型是16px),整個頁面內1em不是一個固定的值

  • rem：相對單位,相對長度單,r是'root'的縮寫,相對於根元素的字型大小,相對根節點html的字型大小來計算,CSS3新加屬性,chrome/firefox/IE9+支援

  • vw、vh、vmin、vmax 使用的前提是在移動端的前提下,即首先申明個的縮放比例,相對於視口的高度和寬度,而不是父元素的(CSS百分比是相對於包含它的最近的父元素的高度和寬度)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
複製程式碼

1,vw：viewpoint width,視窗寬度,1vw等於視窗寬度的1%

2, vh：viewpoint height,視窗高度,1vh等於視窗高度的1%

3, vmin：vw和vh中較小的那個

4, vmax：vw和vh中較大的那個

vw、vh 優勢: 在於能夠直接獲取高度,而用 % 在沒有設定 body 高度的情況下,是無法正確獲得可視區域的高度的

vmin、vmax 用處: 做移動頁面開發時,如果使用 vw、wh 設定字型大小（比如 5vw）,在豎屏和橫屏狀態下顯示的字型大小是不一樣的,由於 vmin 和 vmax 是當前較小的, vw 和 vh 和當前較大的 vw 和 vh,這裡就可以用到 vmin 和 vmax使得文字大小在橫豎屏下保持一致

vw單位和百分比%單位對比 :100vw 和我們平時用的 width:100% 有什麼區別呢？

百分比%是根據父元素寬度或者高度進行計算,而vw vh固定按照viewport來計算,不會受父元素寬高度影響, 100vw包括了頁面滾動條寬度（頁面滾動條屬於viewport範圍內,100vw當然包括了頁面滾動條寬度）,但把body或者html設定為width:100%時,是不包括頁面滾動條的寬度的,也就是說100vw在有縱向滾動條的情況下,會比100%寬, 那麼就會引發一個問題：pc端使用vw單位時,如果頁面內容超出一屏長度,出現了縱向滾動條,同時有元素width:100vw, 則會導致出現條橫向滾動條,因為元素（100vw + 滾動條寬度）超出了viewport寬度,（移動端滾動條不佔位,所以不會有這個問題）不過pc端一般不需要彈性佈局,還是儘量使用width:100%更保險

問題: 怎麼在不同解析度的情況下計算根元素需要的font-size的值

法一: 網易手機端

px是css邏輯畫素,與裝置的物理畫素是有區別的,如iPhone 6使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以裝置畫素數為750 x 1334px,而它的CSS邏輯畫素數為375 x 667px

<script>
    (function (doc, win, undefined) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth; // 螢幕寬度
                if (clientWidth === undefined) return;
                if (clientWidth < 750) { // 螢幕小於750,根元素(html)的font-size
                  docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                } else { // 如果頁面的寬度750px以上,那麼頁面中html的font-size恆為100px
                  docEl.style.fontSize = '100px';
                }
             };
        if (doc.addEventListener === undefined) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window);
</script>
複製程式碼

法二: 淘寶H5 (Flexible)

  • 設定： 頁面不要設定,Flexible會自動設定每個螢幕寬度的根font-size、動態viewport、針對Retina屏做的dpr

  • 換算： 假設拿到的設計稿是750,Flexible會把設計稿分為10份,可以理解為頁面width=10rem,即1rem=75px,所以根font-size（基準值）=75px,之後的css換算rem公式為：

  • rem並不適合用到段落文字上,所以在Flexible整個適配方案中,文字還是使用px作為單位

px / 75 = rem
所以100px = 100 / 75 = 1.33rem
50px = 50 / 75 = 0.66rem
複製程式碼

我覺得有用的連結:

使用Flexible實現手淘H5頁面的終端適配

移動端頁面自適應解決方案—rem佈局(進階版)

二, 移動端meta標籤設定

1, meta 標籤分兩大部分：HTTP 標題資訊(http-equiv)和頁面描述資訊(name)

<meta charset="utf-8">
複製程式碼

2, 設定瀏覽器的相容模式（讓IE使用最新的瀏覽器渲染)

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
複製程式碼

3, name 屬性的 viewport 值 (移動螢幕的縮放)

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

複製程式碼

  • 作用：在移動瀏覽器中,當頁面寬度超出裝置,瀏覽器內部虛擬的一個頁面容器,將頁面容器縮放到裝置那麼大展示, 視口的寬度可以通過meta標籤設定

  • width：視口的寬度,width=device-width：寬度是裝置的寬度

  • initial-scale：初始化縮放,- initial-scale=1.0：不縮放

  • user-scalable：是否允許使用者自行縮放,取值0或1,yes或no

  • minimum-scale：最小縮放,範圍從0到10

  • maximum-scale：最大縮放,範圍從0到10

  • 一般設定了不允許縮放,就沒必要設定最大最小縮放了

4, 在web app應用下狀態條(螢幕頂部條)的顏色,預設default(白色),可以定為black(黑色)和 black-translucent(灰色半透明)

<meta name="apple-mobile-web-app-status-bar-style" content="black">
複製程式碼

5, 刪除預設的蘋果工具欄和選單欄

<meta name="apple-mobile-web-app-capable" content="yes">
複製程式碼

6, 禁止把數字轉化為撥號連結

<meta name="format-detection" content="telephone=no">
複製程式碼

相關文章