rem布局和使用js rem动态改变字体大小,自适应
解决rem文字动态改变字体大小:
<script>
console.log(window.devicePixelRatio);
var iScale = 1;
iScale = iScale/window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,user-scable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '"/>');
//console.log(document.documentElement.clientWidth);
var iWidth = document.documentElement.clientWidth/16;
document.getElementsByTagName('html')[0].style.fontSize = iWidth + 'px';
</script>
rem布局:
var fun = function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//这里是假设在750px宽度设计稿的情况下,1rem = 100px;
//可以根据实际需要修改
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window)
徐增友
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步