方法一:
<script>        
        (function (doc, win) {    
            var docEl = doc.documentElement,    
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',    
            recalc = function () {    
            var clientWidth = docEl.clientWidth;    
            if (!clientWidth) return;    
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';    
        };    
        if (!doc.addEventListener) return;    
        win.addEventListener(resizeEvt, recalc, false);    
        doc.addEventListener('DOMContentLoaded', recalc, false);    
        })(document, window);    
    </script>

方法二:
!function(win, option) {
  var count = 0, 
      designWidth = option.designWidth, 
      designHeight = option.designHeight || 0, 
      designFontSize = option.designFontSize || 20, 
      callback = option.callback || null,
      root = document.documentElement,
      body = document.body,
      rootWidth, newSize, t, self;
      root.style.width = 100%;
  //返回root元素字体计算结果
  function _getNewFontSize() {
    var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth;
    return parseInt( scale * 10000 * designFontSize ) / 10000;
  }
  !function () {
    rootWidth = root.getBoundingClientRect().width;
    self = self ? self : arguments.callee;
    //如果此时屏幕宽度不准确,就尝试再次获取分辨率,只尝试20次,否则使用win.innerWidth计算
    if( rootWidth !== win.innerWidth &&  count < 20 ) {
      win.setTimeout(function () {
        count++;
        self();
      }, 0);
    } else {
      newSize = _getNewFontSize();
      //如果css已经兼容当前分辨率就不管了
      if( newSize + 'px' !== getComputedStyle(root)['font-size'] ) {
        root.style.fontSize = newSize + "px";
        return callback && callback(newSize);
      };
    };
  }();
  //横竖屏切换的时候改变fontSize,根据需要选择使用
  win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    clearTimeout(t);
    t = setTimeout(function () {
      self();
    }, 300);
  }, false);
}(window, {
  designWidth: 640, 
  designHeight: 1136,
  designFontSize: 20,
  callback: function (argument) {
    console.timeEnd("test")
  }
});

方法三:
var dpr, rem, scale; 
var docEl = document.documentElement; 
var fontEl = document.createElement('style'); 
var metaEl = document.querySelector('meta[name="viewport"]'); 
scale = 1 / dpr; 
dpr = win.devicePixelRatio || 1; 
rem = docEl.clientWidth * dpr / 10; 
// 设置viewport,进行缩放,达到高清效果 
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ', 
                     initial-scale=' + scale + ',maximum-scale=' + scale + ', 
                     minimum-scale=' + scale + ',user-scalable=no'); 
// 设置data-dpr属性,留作的css hack之用 
docEl.setAttribute('data-dpr', dpr); 
// 动态写入样式 
docEl.firstElementChild.appendChild(fontEl); 
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; 
// 给js调用的,某一dpr下rem和px之间的转换函数 
window.rem2px = function(v) { 
    v = parseFloat(v); 
    return v * rem; 
}; 
window.px2rem: function(v) { 
    v = parseFloat(v); 
    return v / rem; 
}; 
window.dpr = dpr; 
window.rem = rem;

js适配根字体大小的更多相关文章

  1. 留用 未验证 js适配根字体大小

    方法一:<script>                (function (doc, win) {                var docEl = doc.documentElem ...

  2. 手机端布局,rem布局动态获取根字体大小

    手机端布局,rem布局动态获取根字体大小. 以下代码: //rem布局动态获取根字体大小 function remDynamicLayout(){ var $windowWidth = $(windo ...

  3. 动态设置html根字体大小(随着设备屏幕的大小而变化,从而实现响应式)

    代码如下:如果设置了根字体大小,font-size必须是rem var html =document.querySelector('html'); html.style.fontSize = docu ...

  4. js 改变文章字体大小

    //设置页面文字大小 function SetFontSize(areaid, size) { document.getElementById(areaid).style.fontSize = siz ...

  5. 移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题

    一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZ ...

  6. rem布局,在用户调整手机字体大小/用户调整浏览器字体大小后,布局错乱问题

    一.用户调整浏览器字体大小,影响的是从浏览器打开的web页. 浏览器设置字体大小,影响浏览器打开的页面.通过js可控制用户修改字体大小,使页面不受影响. (function(doc, win) { / ...

  7. hotcss.js Flexible 移动端适配在dpr=2和dpr=3出现的字体大小设置不正确问题.

    这段时间一直在用hotcss做移动端适配,做了几个页面没有发现什么问题,后来老大要加快进度,我把项目分出一块给另一个同事做,她发现了一个问题就是字体在dpr=2,dpr=3,的设备上字体大小显示老是不 ...

  8. 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析

    以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...

  9. Android重写getResources规避用户调整系统字体大小影响Android屏幕适配

    Android屏幕适配一直是一个头疼的问题.除此之外还要考虑APP在实际应用场景中,用户千奇百怪的设置,最常见的用户设置行为就是设置手机的字体大小,比如把字体设置成超大或者超小,这对屏幕适配又带来额外 ...

随机推荐

  1. web标准、可用性、可访问性

    前言:大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师.交互设计师.用户研究员甚至视觉设计师,一般都对web标准.可用性和可访问性的理解有要求.那么到底什么是web标准.可用性.可访问性呢? ...

  2. R语言笔记2

    <13: Simulation> > sample(1:6,4,replace=TRUE) [1] 4 5 2 6 在1-6的整数中随机生成4个整数,且数字可以重复,即每个数字均可重 ...

  3. ReferenceError: internalBinding is not defined

    ReferenceError: internalBinding is not defined at internal/util/inspect.js:31:15 at req_ (D:\workspa ...

  4. 241个jquery插件—jquery插件大全

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...

  5. Framework的简单创建

    如果你想将你开发的控件与别人分享,一种方法是直接提供源代码文件.然而,这种方法并不是很优雅.它会暴露所有的实现细节,而这些实现你可能并不想开源出来.此外,开发者也可能并不想看到你的所有代码,因为他们可 ...

  6. python queue - 同步队列类

    参考 官网 queue 模块 queue 模块实现多生产者,多消费者队列. 当必须在 ==多个线程之间安全地交换信息== 时,它在线程编程中特别有用. 此模块中的Queue类实现了所有必需的锁定语义. ...

  7. 转 Keras 保存与加载网络模型

    https://blog.csdn.net/qq_28413479/article/details/77367665

  8. Spring框架配置文件中有两个相同名字的bean,最后会覆盖掉一个bean

    问题容易出现在多个人合作的项目中,定义bean的名字的时候发生重复. 可以配置当bean定义重复的时候抛出异常,结束程序,强制提示更改重复的bean.

  9. Codeforces Round #513 (rated, Div. 1 + Div. 2)

    前记 眼看他起高楼:眼看他宴宾客:眼看他楼坍了. 比赛历程 开考前一分钟还在慌里慌张地订正上午考试题目. “诶这个数位dp哪里见了鬼了???”瞥了眼时间,无奈而迅速地关去所有其他窗口,临时打了一个缺省 ...

  10. 【dp】饥饿的牛

    普通dp题 题目描述 牛在饲料槽前排好了队.饲料槽依次用1到n(1 ≤ n ≤ 2000)编号.每天晚上,一头幸运的牛根据约翰的规则,吃其中一些槽里的饲料. 约翰提供b个区间的清单.一个区间是一对整数 ...