網頁常見單位： px em pt % rem vw、vh、vmin、vmax ， rem 使用

1.網頁常見單位：  px  em  pt    vw\vh   rem 

1.1

px單位名稱爲像素，相對長度單位，像素（px）是相對於顯示器屏幕分辨率而言  （最終解析單位）

em單位名稱爲相對長度單位。相對於當前對象內文本的字體尺寸   （相對於父元素的字體大小的單位，那若是你要設置一個元素的寬度，高度，那麼就得去看他父級的大小，若是父級也是em單位，你又得去找他的父級，得一層層計算，才能獲得準確的像素值~）

pt單位名稱爲點（Point），絕對長度單位通常老版本的table使用長度大小單位可是如今基本上沒有使用

（

　　換算：瀏覽器的默認字體高度16px，1em=16px        12px至關於9pt長度

）

% 相對於父元素的大小設定的比率

1.2

css3 新增：

vw\vh  相對於視口的寬度。視口被均分爲100單位的vw        （ 至關精確的使用，否則誤差很大，適用於寬泛佈局 ）

 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh      使得文字大小在橫豎屏下保持一致

rem    rem相對的是HTML根元素  

 

參考連接：

css3新單位vw、vh、vmin、vmax的使用詳解

css  參考手冊

 

2.rem 使用 （ 適用於等比縮放場景，當佈局差別化仍是得 media 來區分）   

等比縮放思想  簡潔代碼    

    <meta name="viewport" content="width=640,user-scalable=no" />

 

2.1 要點：

rem是以html爲基準

主流瀏覽器的font-size默認值爲16px      1rem=16px

瀏覽器支持最小字體不一樣 如谷歌 12px  （當設置10px時，生效的是12px）

 

2.2 使用

html{

font-size: 62.5%;

}

body{

font-size: 1.4rem;

}

設置 html 字體爲10px，body設置爲14px，其他距離換算都是 / 10 。

 

better：

html{

font-size: 625%;

}

body{

font-size: 0.14rem;

}

 設置 html 字體爲10px，body設置爲14px，其他距離換算都是 / 100 。

 

js 代碼  ( 平滑過渡能夠設置緩動 或者直接用 jq )

        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 640) {               
                        // docEl.style.fontSize = '100px';
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    }
                };


            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

View Code

tips：若是初次加載頁面閃動：由大變小

1.能夠改變透明度來緩解：初始設置頁面body   visibility: hidden;   字體縮放完成，再弄回正常的   visibility: visible;

2. 設置一系列算好的 media 字體

如：

@media (min-width: 640px){html{font-size: 85.3333px;} }

@media (min-width: 750px){html{font-size: 100px;} }

 

 

2.3 歷史

在rem概念沒引入前咱們的作法是，以最小的屏幕（iPhone）作一版數據出來，而後經過js去控制viewport 的 initial-scale （網頁縮放比例）

如：iPhone4下：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 />

 iPhone6須要調整縮放比例 initial-scale=375/320 =1.18

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.18 />

 

2.4 相關連接

移動端適配之REM