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

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

作者: 亚讯 | 来源:发表于2019-07-28 15:27 被阅读0次

通过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));

相关文章

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

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

  • 常见的移动端适配方案

    常见的移动端适配方案 media queries 媒体查询 flex 布局 rem 根字体大小(html标签的字体...

  • React 配置 rem (移动端适配)

    移动端适配方案介绍 在移动端中,为了设配不同的设备,通常使用rem来做适配。 rem是通过根元素进行适配的,网页中...

  • 移动端适配

    移动端适配 1.适配宽高等问题REM方案:改变页面根部的font-size js方案:通过缩放viewport,达...

  • css小技巧搜集

    1.移动端字体大小适配 利用媒体查询器设置根元素的字体大小,并在开发时使用rem作为单位 2.sticky foo...

  • antd-mobile屏幕适配方案: flexible+px2r

    一、移动端适配方案 目前行业内流行几种适配方法 JS根据屏幕动态计算 使用js判断页面宽度算出页面应有的font-...

  • JS动态设置rem

    移动端中的使用 rem是相对应的根标签的字体大小的系数单位 不同浏览器根标签的默认字体大小不一样,所以JS动态设置...

  • 2018-07-02待学习文章

    1.RN移动端适配:移动端适配方案 flexible.js - 云库网 2.React16新特性:reveal.j...

  • 我的收藏

    结合flexible.js的rem布局方案 如何在Vue项目中使用vw实现移动端适配 React Native 项...

  • meta-viewport

    相关动态REM的文章 移动端高清、多屏适配方案使用Flexible实现手淘H5页面的终端适配 viewport v...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/wafprctx.html