var num = 1 / window.devicePixelRatio;
var fontSize = document.documentElement.clientWidth / 10;
document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px';

适配移动端rem单位,实际使用的时候用量取到的像素值/75即为计算后的rem值,标准为iPhone6的750的尺寸。750px的设计稿的标准宽度为10rem;

补充另一种,本质不变

!function (a, d) {
function c() {
var t = document.documentElement.clientWidth,
i = document.documentElement.clientHeight;
d.documentElement.style.fontSize = ((t / i) >= 0.75) ? t * 0.1 + "px" : t / 750 * 75 + "px"
};
var b = null;
a.addEventListener("onorientationchange" in a ? "orientationchange" : "resize", function () {
clearTimeout(b);
b = setTimeout(c, 300)
}, !1);
a.addEventListener("pageshow", function (a) {
a.persisted && (clearTimeout(b), b = setTimeout(c, 300))
}, !1);
d.addEventListener("DOMContentLoaded", c, false)
}(window, document);

关于移动端rem适配的更多相关文章

  1. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  2. 07. 如何实现移动端rem适配

    如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. 移动端rem适配&iOS兼容

    移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...

  4. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  5. H5移动端rem适配

    /** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...

  6. 移动端rem适配屏幕

    九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...

  7. 自动改变html font-size,实现移动端rem适配

    移动端采用rem适配非常方便 比如在iphone6尺寸下,将html font-size 设置为 100px,那么写css时,只要将尺寸/100 + rem 即可. 在iphone6Plus尺寸下,h ...

  8. js动态计算移动端rem适配问题

    第一:css3的media query来实现适配,例如下面这样: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...

  9. 移动端 rem适配方法

    rem适配 一, 网易适配方法         屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)         document.documentElement. ...

随机推荐

  1. (转) Let’s make an A3C: Theory

    本文转自:https://jaromiru.com/2017/02/16/lets-make-an-a3c-theory/ Let’s make an A3C: Theory February 16, ...

  2. using Redis in .net core

    Using Redis Cache in .net Core Distributed Cache using Redis and ASP.NET Core ASP.NET Core Data Prot ...

  3. SVN的常用功能使用教程

    (一)导入项目到版本库中 1. 在SVN服务器的仓库中新建项目名称文件夹 2. 选择安装Visual SVN的本地计算机中的一个文件夹,右键选择导入,将本地项目导入到SVN服务中央仓库中 3. 输入在 ...

  4. 清除memcached缓存

    telnet localhost 11211 flush_all 最后要一定要关闭dos窗体,不然会导致memcached写值返回ture,但是实际上并没有写入值

  5. 2017"百度之星"程序设计大赛 - 复赛 01,03,05

    Arithmetic of Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  6. 算法时间复杂度的表示法O(n²)、O(n)、O(1)、O(nlogn)等是什么意思?

    Java中  Set 和 List 集合  的contains()方法,检查数组链表中是否包含某元素检查数组链表中是否包含某元素,使用 Set 而不使用 List  的原因是效率问题, 前者的 set ...

  7. java 虹软ArcFace 2.0,java SDK使用、人脸识别-抽取人脸特征并做比对

    java人脸识别 虹软ArcFace 2.0,java SDK使用.人脸识别-抽取人脸特征并做比对 虹软产品地址:http://ai.arcsoft.com.cn/product/arcface.ht ...

  8. Oracle:如何创建一个只有查看权限的用户

    因为工作中测试环境和开发环境是分开的,所以开发有时处理bug时需要连接测试数据库,这样出现一个问题是有些开发会为了验证某些问题任意改动数据库的表和字段,对测试库造成污染.为了能够让开发连接测试环境,同 ...

  9. selenium+Page Objects(第一话)

    简单介绍一种selenium用来做web自动化测试的设计模式:Page Objects 一.Page Objects介绍 用官话说它是selenium中的一种页面对象设计模式(不是测试框架!是一种开展 ...

  10. Mysql数据库如何自动备份

    Mysql数据库如何自动备份 一.总结 一句话总结:用navicat配合windows的批处理即可 navicat windows批处理 二.Mysql数据库自动备份 参考:Mysql数据库自动备份 ...