第一種采用css的@media屬性
- 設(shè)置rem
/*移動端適配 width|height|font-size = 視覺稿量出來的值 / 100rem;@lbl*/
@media screen and (max-width:359px) and (min-width:320px) { html,body{ font-size: 50px !important; }}
@media screen and (max-width:374px) and (min-width:360px) { html,body{ font-size: 56.25px !important; }}
@media screen and (max-width:413px) and (min-width:375px) { html,body{ font-size: 58.5px !important; }}
@media screen and (max-width:639px) and (min-width:414px){ html,body{ font-size: 64.6px !important; }}
@media screen and (min-width:640px) { html,body{ font-size: 100px !important; }}
- 使用rem單位
// 假設(shè)div=50px;
div.style.width= 50/100 rem;
第二種獲取通過js設(shè)置根元素的字體大小
js方法1 :
- 設(shè)置rem
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 +'px';
</script>
問題：為什么要設(shè)置Html的font-size？
答： 其實跟@media的邏輯是一模一樣, 只是一種用css控制rem單位, 一種用js控制rem單位, 換算的邏輯都一樣;
- 是因為這里是作為一個基礎(chǔ)數(shù)值，換一個方向去想，這里先不乘以100以免產(chǎn)生誤解。
例如：設(shè)計稿寬度是640px,有一個元素設(shè)計稿上的寬度是50px，設(shè)備物理寬度是320px，那么根據(jù)比率計算出實際涉筆里面寬度是：50*(320/640)=25px；首先這里沒有問題，實際上的寬度根據(jù)(320/640)這個比率計算出來了是25px，這個(320/640)相當(dāng)于1rem。1）為了計算方便，我們后面把比率乘以了100，(320/640)100,那么相對應(yīng)這個元素在設(shè)置數(shù)值的時候就需要除以100了，這樣可以保證最后出來的數(shù)值不變，相對于0.5rem=50（320/640），最終出來的數(shù)值一直。
2）一般瀏覽器的最小字體是12px，如果font-size=（320/640）px，相當(dāng)于font-size=0.5px,那么這個數(shù)值就小于12px，會造成一些計算的錯誤，和一些奇怪的問題，乘以100后，font-size是50px。
- 使用rem單位計算
// 假設(shè)div=50px;
div.style.width= 50/100 rem;
js方法2 :
- 設(shè)置rem;
將px替換成rem，動態(tài)修改html的font-size適配。它可以很好的根據(jù)根元素的字體大小來進行變化，從而達到各種屏幕基本一致的效果體驗。
舉例說明，通常font-size的默認值是16px, 那么在320px寬度的屏幕下，得到的換算rem的倍數(shù)為320/16=20; 1rem等于16px；
// 1. 首先確定 html 的默認根元素大小(16px=1rem)
const htmlDefaultSize = 16px
// 2. 先根據(jù)設(shè)計稿尺寸,除以html根據(jù)元素大小, 得出rem換算倍數(shù)(假設(shè)320px設(shè)計稿)
let num = 320px / htmlDefaultSize ;
// 3. 再獲取當(dāng)前屏幕大小
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 4. 針對當(dāng)前實際的屏幕尺寸 設(shè)置根元素字體大小
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize= htmlWidth / num + 'px'; // 根據(jù)動態(tài)倍數(shù)換算設(shè)置
- 使用rem單位
: 用實際的px尺寸, 除以設(shè)計稿尺寸對應(yīng)的根元素默認size即可
// 假設(shè)div=50px, 除以默認根元素尺寸16px,
// 再乘以當(dāng)前動態(tài)的根元素尺寸(此時的1rem可能等于12px,10px等) 即得出以rem為單位的實際尺寸
div.style.width= 50/16 rem; // --> (50 / 16) * 1rem
rem之阿里高清布局方案
這是阿里團隊的高清方案布局代碼，所謂高清方案就是根據(jù)設(shè)備屏幕的DPR（設(shè)備像素比，又稱DPPX，比如dpr=2時，表示1個CSS像素由2個物理像素點組成）** 動態(tài)設(shè)置 html 的font-size, 同時根據(jù)設(shè)備DPR調(diào)整頁面的縮放值，進而達到高清效果**
- 該方案使用相當(dāng)簡單，把下面這段已壓縮過的 原生JS（僅1kb） 放到HTML 的 head 標簽中即可（注:不要手動設(shè)置viewport，該方案自動幫你設(shè)置）
<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[\S\s]+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/2*s*n+"px"},e.exports=t["default"]}]); flex(100, 1);</script>
// 來源：簡書 / AkiraSun
// 鏈接：http://www.itdecent.cn/p/e96ccb603a50
此方案也是默認 1rem = 100px，所以你布局的時候，完全可以按照設(shè)計師給你的效果圖寫各種尺寸啦.
- 優(yōu)點: 屏幕越大，像素越高，看到的應(yīng)用越多
