(function (doc, win) {

  console.log("dpr:"+win.devicePixelRatio);

  var docEle = doc.documentElement,

  isIos = navigator.userAgent.match(/iphone|ipod|ipad/gi),

  dpr=Math.min(win.devicePixelRatio, 3);

  scale = 1 / dpr,

  resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';

  docEle.dataset.dpr = dpr; var metaEle = doc.createElement('meta');

  metaEle.name = 'viewport'; metaEle.content = 'initial-scale=' + scale + ',maximum-scale=' + scale;

  docEle.firstElementChild.appendChild(metaEle);

  var recalCulate = function () {

    var width = docEle.clientWidth; if (width / dpr > 640) { width = 640 * dpr; }

    docEle.style.fontSize = 20 * (width / 750) + 'px'; };

    recalCulate() if (!doc.addEventListener) return;

     win.addEventListener(resizeEvent, recalCulate, false);

})(document, window);

rem的计算的更多相关文章

  1. rem怎么计算

    px:相对长度单位.像素px是相对于显示器屏幕分辨率而言的 em:相对单位,继承父节点(层层继承,传递)基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px ...

  2. REM布局计算,移动端,pc端有兼容性)

    rem布局计算(移动端,pc端有兼容性) <!DOCTYPE html> <html> <head lang="en"> <script& ...

  3. 这次我好像才真的明白了CSS Rem字体计算的原理

    背景 如何按照设计稿中标注的尺寸,直接写页面的样式,不再需要px2rem这样的工具或者人工转换 ? 只要你明白了rem的计算原理,这个问题的答案超级简单. 根字体大小计算核心原理 设备的根字体大小 * ...

  4. 关于rem的计算顺序

    /*响应式字体*//* * 字体响应式 * 屏幕>640px时,html字体大小 * 屏幕<640px时,html字体根据屏幕做出相应  * */(function(doc,win){   ...

  5. 第148天:js+rem动态计算font-size的大小,适配各种手机设备

    需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...

  6. 前端移动端的rem适配计算原理

    rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font si ...

  7. rem布局计算(移动端,pc端有兼容性)

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <script> 5 functio ...

  8. JS动态计算移动端rem的解决方案

    首先介绍下rem 说起rem就的说px,em: PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 ...

  9. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

随机推荐

  1. SQLServer 重启服务后,自增1的标识列一次增长了1000(转自博问)

    sql2012:我重启了下sql服务,然后自增列Id居然一下子跳了100,怎么回事啊?(之前的数据Id为1,我重启服务后,第二条数据Id就变成1001了),我自增是1,求大神帮忙啊 SQLServer ...

  2. js删除逗号

    var aaa="123,432,34.00 aaa.replace(/,/g, '');

  3. UVM中factory机制的使用

    UVM中的factory机制一般用在sequence的重载,尤其是virtual sequence.当Test_case变化时,通过virtual sequence的重载,可以很容易构建新的测试. 因 ...

  4. VS2010/MFC编程入门之五十三(Ribbon界面开发:为Ribbon Bar添加控件)

    前面一节中鸡啄米为大家简单介绍了如何创建Ribbon样式的应用程序框架,本节教程就来初步讲讲怎样为Ribbon Bar添加Ribbon控件. VS2010为Ribbon界面开发提供了Ribbon De ...

  5. 20155333 2016-2017-2 《Java程序设计》第九周学习总结

    20155333 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC(Java DataBase Connectivity) 驱动的四种类型 JDBC- ...

  6. Siddhi初探

    官方对Siddhi的介绍如下: Siddhi CEP is a lightweight, easy-to-use Open Source Complex Event Processing Engine ...

  7. 中国用户通过rchange用银联充值到PerfectMoney再给BTC-E充值进行搬砖的方法

    最近迷上了比特币这个疯狂的东西,相信很多技术人员都感兴趣. 比特币.莱特币钱包下载和把数据迁移到C盘以外其他盘的方法. 莱特币和山寨币的原理跟比特币基本上一样,可以参考这个方法进行,莱特币的钱包数据迁 ...

  8. jQuery 对象

    jQuery 对象 版权声明:未经博主授权,严禁转载分享 什么是 jQuery 对象 jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象. jQuery 对象是一个类数组对象. j ...

  9. Django 搭建后台 favicon.ico 文件操作

    Django 搭建后台 favicon.ico 文件操作 使用 django 搭建后台服务器,我用的是 django 1.8 版本以上的,就是路由不是 url 而是 path 的,这里有一个关于fav ...

  10. 如何写出格式优美的javadoc?

    如果你读过Java源码,那你应该已经见到了源码中优美的javadoc.在eclipse 中鼠标指向任何的公有方法都会显示出详细的描述,例如返回值.作用.异常类型等等. 本文主要来自<Thinki ...