手機端rem無限適配

參考文檔:git

http://blog.csdn.net/xwqqq/article/details/54862279github

https://github.com/amfe/lib-flexible/tree/masterweb

http://blog.csdn.net/ful1021/article/details/9321207app

https://mp.weixin.qq.com/s/DpLXJhfCHsgrbgbuk25Ekwwebapp

 

head設置 meta和js:

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

rem單位=設計稿尺寸/100.net

var designWidth = 640, rem2px = 100;
var d = window.document.createElement('div');
d.style.width = '1rem';
d.style.display = "none";
var head = window.document.getElementsByTagName('head')[0];
head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
d.remove();
document.documentElement.style.fontSize =
window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
相關文章
相關標籤/搜索