(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. VS2010/MFC编程入门之五十(图形图像:GDI对象之画笔CPen)

    上一节中鸡啄米讲了CDC类及其屏幕绘图函数,本节的主要内容是GDI对象之画笔CPen. GDI对象 在MFC中,CGdiObject类是GDI对象的基类,通过查阅MSDN我们可以看到,CGdiObje ...

  2. DIV内容垂直居中

    css垂直居中属性设置vertical-align: middle对div不起作用,例如: <!DOCTYPE html> <html lang="zh-CN"& ...

  3. wamp下配置多域名和访问路径的方法

    wamp下配置多域名和访问路径的方法 1.到安装目录下,打开配置httpd.confD:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf也可以通过wamp图标 ...

  4. AtCoder Beginner Contest 086 D - Checker

    Time limit : 2sec / Memory limit : 256MB Score : 500 points Problem Statement AtCoDeer is thinking o ...

  5. OpenGL边用边学------2 经典照相机模型

    https://blog.csdn.net/smstong/article/details/50290327 实际照相步骤 1 布置场景和调整照相机位置 3 选择镜头对焦Focus 4 按下快门 5 ...

  6. php json_decode返回null

    在使用json_decode函数想把json串转化为数组的时候,出现了null,当时还以为是因为json对字符串的长度有限制,还以为是因为两边少了引号,经过多次处理,发现都没有效果. 百度各种帖子,发 ...

  7. JavaScript DOM 元素属性 状态属性

    JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...

  8. 20145208 蔡野《网络对抗》Exp3 Advanced 恶意代码伪装技术实践

    20145208 蔡野<网络对抗>Exp3 Advanced 恶意代码伪装技术实践 木马化正常软件 思路: 在正常软件包中将原本的程序主文件(平时打开程序用的exe文件)改成dll后缀(或 ...

  9. Max Factor(素数筛法)题解

    Max Factor Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  10. 论文笔记——NEURAL ARCHITECTURE SEARCH WITH REINFORCEMENT LEARNING

    论文地址:https://arxiv.org/abs/1611.01578 1. 论文思想 强化学习,用一个RNN学一个网络参数的序列,然后将其转换成网络,然后训练,得到一个反馈,这个反馈作用于RNN ...