方案1:
使用rem进行换算,根据移动端屏幕大小的变化,来动态的设置根元素的字体大小,rem就是根据根元素html的字体大小渲染的,
如果是375px的设计图,那么就将元素的尺寸px乘以2,再除以100就是该元素的rem值了,如果是750px的设计稿就直接除以100
function mobileMatvhing(){
var html = document.getElementById('html');
var phoneWidth = document.documentElement.clientWidth;
html.style.fontSize = phoneWidth*100/750 + 'px'
}
方案2:
如果是375px的设计图,设计图直接除以100,转化为rem
(function (_D) {
var _self = {};
_self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
_self.Html = _D.getElementsByTagName('html')[0];
_self.widthProportion = function () {
var p = Number(((_D.body && _D.body.clientWidth) || _self.Html.offsetWidth) / 375).toFixed(3);
return p;
};
_self.changePage = function () {
_self.Html.setAttribute('style', 'font-size:' + _self.widthProportion() * 100 + 'px');
};
_self.changePage();
if (!document.addEventListener) return;
window.addEventListener(_self.resizeEvt, _self.changePage, false);
document.addEventListener('DOMContentLoaded', _self.changePage, false);
})(document);