(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. windows 7 中使用命令行创建WiFi热点

    就是让你的电脑可以作为WiFi热点,然后供其它支持WiFi的设备上网 首先你的电脑中必须有正常使用的无线网卡 幺幺幺切克闹,开始命令吧,(注:命令是在windows中的命令提示符中运行的) 禁用承载网 ...

  2. bootstrap 带有确定取消按钮的modal

    </div><div class="modal fade" id="confirmModal" tabindex="-1" ...

  3. volatile的语义与实现

    1.volatile关键字的两层语义 一旦一个共享变量(类的成员变量.类的静态成员变量)被volatile修饰之后,那么就具备了两层语义: 1)保证了不同线程对这个变量进行操作时的可见性,即一个线程修 ...

  4. jq table页二级联动

    <div class="layerRtb layerRtb-threecolumn"> <div class="clearfix layerRtb-he ...

  5. 测试开发-PC客户端测试要点

      一级测试点 二级测试点 安装测试 首次安装(exe和msi格式的不同) 安装程序权限检查 软件安装包的描述和属性信息 静默安装和非静默安装测试 有UAC安装.无UAC安装 联网安装.断网安装 对必 ...

  6. Django框架----render函数和redirect函数的区别

    render函数和redirect函数的区别: render:只会返回页面内容,但是未发送第二次请求 redirect:发挥了第二次请求,url更新 具体实例说明 render: redirect:

  7. 电脑异常断电,IDEA崩溃

    今天电脑突然断电,当时正好开着idea,等了半天无果,只能强行关机重启.重启之后,那么问题来了:重新打开idea报错java.lang.AssertionError:upexpected conten ...

  8. MySQL Crash Course #19# Chapter 27. Globalization and Localization

    Globalization and Localization When discussing multiple languages and characters sets, you will run ...

  9. Python入门之面向对象编程(二)python类的详解

    本文通过创建几个类来覆盖python中类的基础知识,主要有如下几个类 Animal :各种属性.方法以及属性的修改 Dog :将方法转化为属性并操作的方法 Cat :私人属性讲解,方法的继承与覆盖 T ...

  10. Python网络爬虫案例(二)——爬取招聘信息网站

    利用Python,爬取 51job 上面有关于 IT行业 的招聘信息 版权声明:未经博主授权,内容严禁分享转载 案例代码: # __author : "J" # date : 20 ...