<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>

  

加入这么一段js,就可以根据屏幕的宽度动态改变font-size

根据这一句 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';  可知

iphone4宽度是320px,那么font-size就是20px, 100px就是5rem

iphone6宽度是375px,那么font-size就是23.4375px,100px就是4.267rem

包治红米手机 小米手机。  用媒体查询 @media有点坑。 有的不支持所以强制通过一段js根据屏幕的宽度动态改变根的html

移动端rem设置,自动更改html<font-size>的更多相关文章

  1. 移动端rem设置(部分安卓机型不兼容)

    (function(win) { var doc = win.document; var docEl = doc.documentElement; var tid; function refreshR ...

  2. hbuilder设置自动px 转换成rem

    hbuilder里面有自动换算的 需要设置一下:工具–>选项–>Hbuilder–>代码助手设置.里面有个px自动转rem设置,按自己的实际情况设置就可以在每次输入px的时候有提示了 ...

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

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

  4. 移动端rem单位用法[转]

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  5. 浅谈移动端rem的用法

    一 什么是rem? “font size of the root element 这是w3c的定义 也就是说是相对于根节点(html节点)的字体大小的单位. 目前主流的浏览器基本都支持rem这个单位, ...

  6. 移动端rem的用法

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  7. 移动端rem适配屏幕

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

  8. 移动端rem单位用法

    1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们 ...

  9. 移动端rem布局实现(vw)

    什么是rem?在W3C官网上是这样描述的:“font size of the root element (根元素的字体大小)”.就是说rem是相当于html的,因为网页的默认字体大小是 16px,所以 ...

随机推荐

  1. boost之字符串与文本处理

    C++标准库中字符串转数值使用函数atoi(),数值转字符串使用printf系列函数. boost中使用转换函数操作符lexical_cast<>进行转换,实际上是模板函数.自定义类型,要 ...

  2. LeetCode-day03

    28. Best Time to Buy and Sell Stock 买卖股票的最好时间 29. Best Time to Buy and Sell Stock II 买卖股票2(多次买入,一次卖出 ...

  3. hadoop学习第四天-Writable和WritableComparable序列化接口的使用&&MapReduce中传递javaBean的简单例子

    一. 为什么javaBean要继承Writable和WritableComparable接口? 1. 如果一个javaBean想要作为MapReduce的key或者value,就一定要实现序列化,因为 ...

  4. linux环回文件

    我们通常在设备上(比如磁盘分区)上创建文件系统,这些存储设备能够以设备文件的形式来使用,如/dev/device_name.为了使用存储设备上的文件系统,我们将其挂载到挂载点. 环回文件系统是指那些在 ...

  5. A+B和C (15)

    时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 给定区间[-2的31次方, 2的31次方]内的3个整数A.B和C ...

  6. 剑指offer 面试63题

    面试63题 题目:股票的最大利润 题:假设把某股票的价格按照时间先后顺序存储在数组中,请问买卖该股票一次可获得的最大利润是多少?例如,一只股票在某些时间节点的价格为{9,11,8,5,7,12,16, ...

  7. MVC4 中使用 Area 和 注意的地方

    在MVC项目中经常会使用到Area来分开不同的模块让项目结构更加的清晰. 步骤如下:  项目 –> 添加 -> 区域 (Area)  输入 Admin 添加成功后 Area包含:创建一个空 ...

  8. 在英文Windows操作系统上使用SQL Server Management Studio(SSMS)导入Excel 97-2003文件时报错:Failure creating file

    今天在公司服务器上使用SQL Server Management Studio(SSMS)导入Excel 97-2003文件(.xls)时报错: Failure creating file. (Mic ...

  9. iOS系统自带分享功能

    很多APP中都带有社交分享功能,通过用户的分享,让更多地人去了解和使用这个APP,目前社交分享是移动互联网应用程序推广的最重要手段之一,国内较或的分享平台有微信,IOS6后苹果集成的新浪微博,还有IO ...

  10. 建议37:按需选择sort或sorted

    # -*- coding:utf-8 -*- ''' 用法: sorted(iterable[, cmp[, key[, reverse]]]) s.sort([cmp[, key[, reverse ...