(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. linux字符处理命令 sort(部分转载)

    [root@LocalWeb01 ~]# sort /etc/passwd |less   (升序 ) [root@LocalWeb01 ~]# sort -r /etc/passwd |less ( ...

  2. 解读jquery.filtertable.min

    jQuery.FilterTable是一款表格搜索过滤和单元格高亮插件. 该插件允许你对任意表格进行条件过滤,并且它会将搜索到的结果单元格高亮显示,非常实用和强大. 使用方法在页面中引入jquery和 ...

  3. hdu4991 树状数组+dp

    这题说的是给了一个序列长度为n 然后求这个序列的严格递增序列长度是m的方案有多少种,如果用dp做那么对于状态有dp[n][m]=dp[10000][100],时间复杂度为n*m*n接受不了那么想想是否 ...

  4. C++11使用emplace_back代替push_back

    最近在写一段代码的时候,突然很好奇C++11中对push_back有没有什么改进以增加效率,上网搜了一些资料,发现果然新增了emplace_back方法,比push_back的效率要高很多. 首先,写 ...

  5. linux常用命令:iconv 命令

    iconv命令是linux下用于文件转编码的常用命令,对于同时使用windows系统和linux系统的同学来说文件转编码也是经常遇到的操作. 1.命令格式: iconv [选项...] [文件...] ...

  6. 新项目新工作空间新仓库新setting文件

     maven项目涉及到仓库,本地jar包存放在本地仓库中,新项目新工作空间新仓库新setting文件,可以避免很多问题,不同项目工程的版本可能不一样,所涉及的jar包版本可能也不一样,不分开会有一些冲 ...

  7. pycharm 设置文件编码的位置:Editor-->File Encodings

    打开设置-->Editor-->File Encodings 

  8. linux通过rpm和yum安装包

    1.rpm包的安装过程:进入rpm包的所在目录,通过rpm -ivh 包名安装,rpm安装无法解决依赖关系 2.yum安装过程:读取/etc/yum.repo/下配置文件中的baseurl地址,找到该 ...

  9. nw.js node-webkit系列(15)如何使用内部模块和第三方模块进行开发

    原文链接:http://blog.csdn.net/zeping891103/article/details/50786259 原谅原版链接:https://github.com/nwjs/nw.js ...

  10. 20145332 MAL_简单后门

    20145332 MAL_简单后门 用NC获取远程主机的shell 2.1.1 Windows获得Linux的权限 首先要在Windows主机下安装ncat.exe,安装完成后需要配置环境变量path ...