移動端適配：動態設置html元素的font-size（頁面使用rem做單位）

一、前言：

首先我們要了解的知識點：

1.物理像素(physical pixel)

我們看到的每個屏幕都是由一顆顆我們肉眼難以看到的小顆粒（物理像素）組成的。

2.邏輯像素

是計算機座標系統中的一個點，這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素)。

3.設備的像素比(device pixel ratio)簡稱DPR

它的數值體現了物理像素和邏輯像素之間的關係，用公式可以計算出該設備的DPR的大小：

DPR = 物理像素 / 邏輯像素

那麼瞭解了上面這些概念，就可以知道，爲什麼css在pc上寫着font-size=12px;但是換到手機上卻變小了？因爲手機端的DPR變大了。
沒錯，我們在電腦屏幕上的DPR是1，但是手機卻不同，可能是它可能是2，也可能是3。
獲取設備DPR的方法還是有的：
1.在JavaScript中，通過window.devicePixelRatio來獲取
2.在css中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不同DPR的設備，做一些樣式適配(這裏只針對webkit內核的瀏覽器和webview)。

二、頁面適配開發

1、設置頁面的viewport視口

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

2、我們以iPhone6設計稿來進行移動端的開發（設計稿是750px）

那麼我們得到的deviceWidth = 375px; 爲了方便在開發的時候量尺寸好算，我們設置html的font-size爲50px。
那麼本來根據設計稿量出來的div是80px的話我們要先除以2，得到實際的寬度px，然後要轉換爲rem，我們還要除以html的font-size，即再除以50，即可得到單位rem的數值。
也就是說：拿到一個iPhone6設計圖，量到的px像素值來除以100，那麼得到的值就是多少rem。

deviceWidth = 320，font-size = 320 / 7.5 = 42.6667px
deviceWidth = 375，font-size = 375 / 7.5 = 50px
deviceWidth = 414，font-size = 414 / 7.5 = 55.2px
deviceWidth = 500，font-size = 500 / 7.5 = 66.6667px

這個deviceWidth就是viewport設置中的那個device-width。
（設置html的font-size的值爲多少其實就是爲了方便計算，如果你的設計稿是iPhone4，那麼html的font-size = 320 / 6.4 = 50px方便計算）

動態設置HTML元素的font-size代碼如下：

var html = document.documentElement; //獲取到html元素
var hWidth = html.getBoundingClientRect().width;//獲取到html的寬度
if(hWidth > 640) hWidth = 640; // 當hWidth大於640時，則物理分辨率大於1280（這就看設備的devicePixelRatio這個值了），應該去訪問pc網站了
html.style.fontSize = hWidth/7.5 + "px"; //設置HTML的字體大小 font-size = 50px，1rem = 50px

3、如果頁面的字體不想使用rem作爲單位，那麼就使用媒體查詢來設置body的font-size。

@media screen and (min-width: 320px) {
    body {font-size: 14px;}
}
 
@media screen and (min-width: 360px) {
    body {font-size: 16px;}
}
 
@media screen and (min-width: 400px) {
    body {font-size: 18px;}
}
 
@media screen and (min-width: 440px) {
    body {font-size: 20px;}
}
 
@media screen and (min-width: 480px) {
    body {font-size: 22px;}
}
 
@media screen and (min-width: 640px) and (max-width: 640px) {
    body {font-size: 28px;}
}

4、學習得來的各屏幕的rem適配（終極方案）------- sass語法

$baseDevice: 750; // 默認iphone6設計稿
$device: $baseDevice / 2; // 375 ，iphone6設備寬度
$baseFontSize: 100px;
@function px2rem($px, $base-font-size: $baseDevice / $device * $baseFontSize) {
  // unitless() 函數只是用來判斷一個值是否帶有單位，如果不帶單位返回的值爲 true，帶單位返回的值爲 false
  // unit() 函數主要是用來獲取一個值所使用的單位，碰到複雜的計算時，其能根據運算得到一個“多單位組合”的值，不過只充許乘、除運算
  @if (unitless($px)) { 
    @warn 'Assuming #{$px} to be in pixels';
    @return px2rem($px + 0px)
  }
  @else if (unit($px) == rem) { 
    @return $px
  }
  @return ($px / $base-font-size) * 1rem
}

html {
  font-size: $baseFontSize;
}
@media screen and (min-width: 320px) {
  html {
    font-size: (320 /  $device) * $baseFontSize;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: (360 /  $device) * $baseFontSize; // 96px
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: (375 /  $device) * $baseFontSize; // 100px
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: (480 /  $device) * $baseFontSize; // 128px
  }
}
@media screen and (min-width: 640px) {
  html {
    font-size: (640 /  $device) * $baseFontSize;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: (750 /  $device) * $baseFontSize;
  }
}
// 示例使用
div {
  font-size: px2rem(28px); // 750px的設計稿量出來是多少px就直接扔進去自動換算爲rem
}

5、淘寶的H5移動端適配方案flexible.js

學習鏈接： https://github.com/amfe/article/issues/17#
————————————————————————————————————

參考原文：
https://segmentfault.com/a/1190000004189237
https://www.cnblogs.com/axl234/p/5156956.html