移動端rem布局

前端很流行的布局方式rem布局，通過設備之間px像素與rem的轉換，達到不同螢屏相同視覺效果的布局方式，在了解rem布局之前需要先明白幾個概念，設備像素（物理像素）、獨立像素、CSS像素，

設備像素（物理像素）

螢屏設備真實的像素點，一張圖片就是由一個個像素點構成，螢屏也是有一個個像素點構成，一個iPhone6的設備像素是750*1334，螢屏制造商制作行內標準制定，屬于物理范疇，不能修改，

獨立像素（邏輯像素）

邏輯像素，作業系統規約定義的一種長度單位，規定一個獨立像素等于兩個物理像素，那么iPhone6的設備的獨立像素是 375 * 667像素，主流作業系統產商按標準規定，屬于協議規約范疇，

CSS像素

網頁制作中CSS樣式語言中定義的長度單位，如今（iPhone4開始）CSS中1px就是1CSS像素等于1獨立像素，屬于語言協會制定標準，

devicePixelRatio設備像素比

js中也引入了設備devicePixeRito像素比的概念，描述物理像素與獨立像素之比（物理像素/獨立像素），可以在BOM物件（window）中查看，使用window.devicePixelRatio進行查看，

resolution

媒體查詢中的resolution變數就是指window.devicePixelRatio

@media (min-resolution: 2dppx) {
  
}

場景理解

遠古時代（iPhone3物理像素：320*480），當時1CSS像素=1物理像素，假設我們就學會了編程且是前端，設計網頁是按照iPhone3尺寸來進行設計，為了我們的網頁能夠占滿螢屏，我們在CSS樣式中設定width: 320px，當時是剛好占滿螢屏，可是蘋果公司在iPhone4時推出了Retina 螢屏物理像素變成：640*960，螢屏尺寸沒有變化，原本設定的網頁在iPhone4中就占一半，巨丑！所以新時代救星來了，獨立像素的到來，1CSS=1獨立像素=2物理像素，這個時候我們的網頁在iPhone3、iPhone4都可以占滿螢屏了！因為iPhone4螢屏像素（高清螢屏）看得更加的清楚，同理圖片也是如此，像素越多越清晰，但體積越大，

尺寸參考

參考網址鏈接：https://material.io/resources/devices/，其中dp列為獨立像素，px列為物理像素，大家覺得搜集麻煩的話可以去我的資源收錄網站：http://n.huasenjio.top/，有很多實用的資源網站！

rem布局實作

理念

rem是CSS中的一個長度單位，html根元素中的font-size的值就是1rem，例如你在寫樣式的時候為html標簽（:root偽類）設定了font-size: 14px，那么1rem就是14px，當你修改html的font-size值時，rem也會發生變化，一句話概括就是為html標簽定義font-size值，在寫樣式的時候用rem代替px，固定大小的標簽盡量使用rem，自由伸縮元素使用百分比布局或者flex布局，

1）js

因為視口viewport的出現，head標簽中的<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">，獲取螢屏實際的真實物理螢屏像素已經很簡單了，根據js查詢到當前螢屏的px值，通過js動態修改html標簽的font-size值，父元素寬高值設定rem，子元素設定相對于父元素的百分比寬高的理念就能簡單實作一個rem布局，

// 立即執行函式
function () {
  const setHtmlFontSize = () => document.documentElement.style.fontSize = document.documentElement.clientWidth / 100
  window.addEventListener('DOMContentLoaded,setHtmlFontSize, false) // 初始的 HTML 檔案被完全加載和決議完成呼叫
  window.addEventListener('orientationchange',setHtmlFontSize, false) // 螢屏橫豎轉換時候呼叫
} ()

把螢屏分為100份，每一份就是一個1rem，例如你的手機是iPhone6（375px），那么1rem==37.5px，每一個螢屏都是下100rem就會占滿一塊螢屏，如果我們拿到的設計稿是750的物理像素的iPhone6設計稿，那么獨立像素就是370px，我們通過馬克鰻量到一個元素是30px，那么我們設定元素的寬度時就別寫width: 30px，正確的姿勢應該是width: 30/37.5rem，為了避免麻煩我們建議使用sass（css增強語言），定義一個轉換sass方法，

@function px2rem($px) {
  @return $px / 37.5 + rem; // 使用時width: px2rem(30)
}

2）devicePixelRatio

通過document.documentElement.clientWidth獲得檔案像素再動態修改html標簽的font-size的方式，進而給父元素設定CSS寬高距離等使用rem代替px的理念，大螢屏環境下，元素位置寬高不會發生太大改變，而元素內的子元素例如圖片文字等則會變化得很小，類似于百分比布局，導致塊大內容不佳的問題，出現了新的方案就是利用到js物件devicePixelRatio，查詢到當前螢屏的設備像素比，動態設定htmt的font-size值、viewport的mata標簽的initial-scale（縮放比例），設定初始的1rem=30px，devicePixelRatio==2的螢屏下1rem =30*2，而<meta name="viewport">的值始終是initial-scale = 1 / dpr，當initial-scale ==1時是正常顯示，顯示得相對清楚，

'use strict';

/**
 * 不用自己添加mata的viewport標簽
 * @param {Boolean} [normal = false] - 是否正常顯示;  
 * @param {Number} [baseFontSize = 100] - 初始字體大小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);
  }
	// 設定mata的viewport標簽
  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`;
};

vue專案適配rem布局

rem的原理將物理像素px分為一百份，每一份就是1rem，例如當你的手機是蘋果6s，物理像素是375px，那么轉化成rem就是37.5px，插件設定html根標簽的字體屬性font-size變為1rem，通過轉換將css中的px轉換成對應的rem，當螢屏發生大小縮放的時候，更改html下的font-size的大小，就能實作了其他標簽的大小距離也隨比例縮放，達到rem自適應布局，

1）安裝依賴

npm i lib-flexible postcss-px2rem --save

2）洗掉index.html中的<meta name=‘viewport’ >視口標簽

flexible會為頁面根據螢屏自動添加<meta name='viewport' >標簽，動態控制initial-scale，maximum-scale，minimum-scale等屬性的值，不洗掉會造成重復追加，導致代碼冗余等情況，

3） 入口檔案main.js檔案中引入依賴

import 'lib-flexible'

4）配置vue.config.js檔案

module.exports = {
  devServer: {
    port: 3000,
    open: true
  },
  // rem 的配置
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            // 適配375px螢屏 設計圖750中量出來的尺寸要 / 2
            remUnit: 37.5
          })
        ]
      }
    }
  }
}