手机端适配rem计算方法

<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或者百分比。