移动端适配方案:js实现动态改变根元素的字体大小

通过js动态获取屏幕的宽度(document.clientWidth)然后根据屏幕宽度动态计算出rem的实际值。

假设,640px的设备 1rem = 100px
公式: rem = document.clientWidth / 640 * 100px;

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width = width < 320 ? 320 : width;
            width = width > 640 ? 640 : width;
            width && (docEle.style.fontSize = 100 * (width / 640) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动端适配方案:1)viewport(scale=1/dpr)2)rem3)flex4)vm/vh一、什么是移动端...
    puxiaotaoc阅读 43,146评论 3 56
  • 了解真实的『REM』手机屏幕适配rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。 使用...
    张宪宇阅读 2,288评论 0 5
  • 不知不觉做前端已经两年了,从PC端,移动端,微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技...
    是ADI呀阅读 3,163评论 0 10
  • 多的话就不说了,反正WebApp现在是很火,PC端网页已经远远不能满足大家的胃口,今天来谈谈如何制作一个WebAp...
    PoWerfulHeart阅读 425评论 0 0
  • 其他武术侧踢大多数是左腿发出截拳道侧踢是右腿发出力量对比截拳道侧踢力量明显要一些其他武术侧踢是中高侧踢为主截拳道低...
    白眉大侠_be96阅读 132评论 0 1