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">
複製代碼