rem使用配置

rem的使用會轉化爲一個如何讓根元素的font-size動態變化問題?

/*dpi*/
/* for 1080+ px width screen */
/* for 1080 px width screen */
/* for 800 px width screen */
/* for 800 px width screen */
@media only screen and (min-width: 751px) { html, body { font-size: 31.25px; } }
/* for 800 px width screen */
@media only screen and (max-width: 750px) { html, body { font-size: 31.25px; } }
/* for 720 px width screen */
@media only screen and (max-width: 720px) { html, body { font-size: 30px; } }
/* for 640 px width screen */
@media only screen and (max-width: 640px) { html, body { font-size: 27px; } }
/* for 540 px width screen */
@media only screen and (max-width: 540px) { html, body { font-size: 22.5px; } }
/* for 480 px width screen */
@media only screen and (max-width: 480px) { html, body { font-size: 20px; } }
/* for 450 px width screen */
@media only screen and (max-width: 450px) { html, body { font-size: 18.9px; } }
/* for 414 px width screen */
@media only screen and (max-width: 414px) { html, body { font-size: 17.25px; } }
/* for 375 px width screen */
@media only screen and (max-width: 375px) { html, body { font-size: 15.625px; } }
/* for 320 px width screen */
@media only screen and (max-width: 320px) { html, body { font-size: 13.5px; } }

@media 可以針對不同的屏幕尺寸設置不同的樣式

特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

其實看到這裏對於這個概念還是不明確，並且媒體查詢中包含很多關鍵字，那我們常用的有 and not only

only關鍵字防止老舊的瀏覽器不支持帶媒體屬性的查詢而應用到給定的樣式

and關鍵字用於合併多個媒體屬性或合併媒體屬性與媒體類型

not關鍵字應用於整個媒體查詢，在媒體查詢爲假時返回真

舉個簡單的例子：

/媒體查詢支持最大寬度爲320px應用以下CSS html body 的fontsize設置爲13.5px/
@media only screen and (max-width: 320px) { html, body { font-size: 13.5px; } }

手機端頁面自適應解決方案—rem佈局

只需在頁面引入這段原生js代碼就可以了

(function (doc, win) {
       var docEl = doc.documentElement, //文檔根標籤
           resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //viewport變化事，獲取移動端屏幕是否翻轉件源
           recalc = function () {
             //重置方法
               var clientWidth = docEl.clientWidth;
               if (!clientWidth) return;
               // 改變DOM根節點fontSize大小的值;
      // (屏幕寬度/設計圖寬度) = 縮放或擴大的比例值;
               if(clientWidth>=640){
                   docEl.style.fontSize = '100px';
               }else{
                   docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
               }
           };

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

如何使用？
這是rem佈局的核心代碼，這段代碼的大意是：
如果頁面的寬度超過了640px，那麼頁面中html的font-size恆爲100px，否則，頁面中html的font-size的大小爲： 100 * (當前頁面寬度 / 640)

爲什麼是640px？

• 爲什麼是640px？
  對於手機屏幕來說，640px的頁面寬度是一個安全的最大寬度，保證了移動端頁面兩邊不會留白。注意這裏的px是css邏輯像素，與設備的物理像素是有區別的。如iPhone 5使用的是Retina視網膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以設備像素數爲640 x 1136px，而它的CSS邏輯像素數爲320 x 568px。
  如果要切移動端頁面，你可以先把效果圖寬度等比例縮放到640px，很好用。
• 爲什麼要設置html的font-size？
  rem就是根元素（即：html）的字體大小。html中的所有標籤樣式凡是涉及到尺寸的（如： height,width,padding,margin,font-size。甚至，left,top等）你都可以放心大膽的用rem作單位。

設計圖一般是640px的，這樣相當於100px = 1rem，可以方便計算；

因爲是640px所以應限制下頁面的大小，所以最外層的盒子應該是：

position: relative;
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;

高清方案的源碼

'use strict';

/**
 * @param {Boolean} [normal = false] - 默認開啓頁面壓縮以使頁面高清;  
 * @param {Number} [baseFontSize = 100] - 基礎fontSize, 默認100px;
 * @param {Number} [fontscale = 1] - 有的業務希望能放大一定比例的字體;
 */
const win = window;
export default win.flex = (normal, baseFontSize, fontscale) => {
  const _baseFontSize = baseFontSize || 100;
  const _fontscale = fontscale || 1;

  const doc = win.document;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  let dpr = win.devicePixelRatio || 1;
  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
    // 如果非iOS, 非Android4.3以上, 非UC內核, 就不執行高清, dpr設爲1;
    dpr = 1;
  }
  const scale = normal ? 1 : 1 / dpr;

  let metaEl = doc.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
  doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};