<script> 一、手機騰訊網根節點字體計算方案1 (function() { var baseFontSize = 100; var baseWidth = 320（下改）; var clientWidth = document.documentElement.clientWidth || window.innerWidth; var innerWidth = Math.max(Math.min(clientWidth, 480), 320); var rem = 100; if (innerWidth > 320 && innerWidth <= 375) { rem = Math.floor(innerWidth / baseWidth * baseFontSize /** 0.9*/); } if (innerWidth > 375) { rem = Math.floor(innerWidth / baseWidth * baseFontSize /** 0.84*/); } document.querySelector('html').style.fontSize = rem + 'px'; })(); </script> 這種方法在安卓、iphone、ipad等常規手機上都挺好，在使用中發現，如果單純使用rem做頁面適應，會發現很多小數點。 拿：iphone6來說，設計師給的圖是750px，首先，要在制作的時候除以自己要想著除以2，因為iphone寬度是375px，再除以跟元素的px值，而拿iphone6來說，在自己前面計算除以2的值基礎上再除以117px（根的px值）,除完117會發現很多小數點，如果用less還好點，直接定義@base-html:117rem；例如@base-html/12，這樣不用小數點，但是如果不是用less,自己去計算會算到想吐；

二、手機騰訊網根節點字體計算方案2
(function() {
var baseFontSize = 100;
var baseWidth = 375（改）;
var clientWidth = document.documentElement.clientWidth || window.innerWidth;
var innerWidth = Math.max(Math.min(clientWidth, 480), 360);

var rem = 100;
if (innerWidth >= 414) {
? ? rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.98);
} else {
? ? rem = Math.floor(innerWidth / baseWidth * baseFontSize);
}

document.querySelector('html').style.fontSize = rem + 'px';
}());

如果設計師給750px設計的ui圖，同上，在自己前面計算除以2的值基礎上再除以100px（根的px值）,這個沒多少小數點，那問題來了，如果是設計師給的不是750的圖呢？

?

三、根節點字體計算方案3

(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; // if(!clientWidth>640){ // docEl.style.fontSize = 10 +'px'; // }else{ // docEl.style.fontSize = 10* (clientWidth / 640) + 'px'; // }; docEl.style.fontSize = 100* (clientWidth / 750*這個值根據設計師給的來填寫) + 'px'; }; if(!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document,window) 方法三:還不錯，這個不用再設計圖的基礎上除以2，如果設計師給750px設計的ui圖，padding：72px;直接寫0.72rem即可，上面已經放大100倍，還可以根據需要，看上面*這個值根據設計師給的來填寫 缺點：在ipad上會出現模糊的情況。 四、根節點字體計算方案4 <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(normal,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=normal?1: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=normal?"50px": a/2*s*n+"px"},e.exports=t["default"]}]); flex(false,100, 1);</script> （注:不要手動設置viewport，該方案自動幫你設置）

方案四（推薦）：

根據設備屏幕的DPR,自動設置最合適的高清縮放。

保證了不同設備下視覺體驗的一致性。（老方案是，屏幕越大元素越大，會模糊；此方案是，屏幕越大，看的越多）

注意1：如果元素的寬度超過效果圖寬度的一半（效果圖寬為640或750），果斷使用百分比寬度，或者flex布局。

注意2：如果引入第三方插件，css大小固定記得用less等

//定義一個變量和一個mixin @baseFontSize: 75;//基于視覺稿橫屏尺寸/100得出的基準font-size.px2rem(@name, @px){@{name}: @px / @baseFontSize * 1rem;}//使用示例： .container {.px2rem(height, 240);}

注意三：面對實在太多css不能壓縮

源代碼壓縮flex(false, 100, 1)? ? ?想要關閉則window.flex(true)，馬上關閉壓縮就可以了，而rem的用法保持不變。

注意四：這個rem適合寫固定尺寸。其余的根據需要換成flex或者百分比。

?

?

?

轉載于:https://www.cnblogs.com/cainiao-vcu/p/8270497.html

總結

以上是生活随笔為你收集整理的手机端适配rem计算方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。