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`;
};





<!-- 阿里高清方案 -->

<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[Ss]+AppleWebkit/(d{3})/i),l=o.match(/U3/((d+|.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2sn+"px"},e.exports=t["default"]}]);

flex(100, 1);</script>

參考：
https://www.jianshu.com/c/f904ec54e871