<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. Eclipse解决JSP页面乱码问题

    解决方案 1.首先选择 Window  -->  Preferences  -->  General-->  Content Types --> text (点击左边的+,显示 ...

  2. Nginx图片及样式文件不记录访问日志

    1.Nginx作为web服务器是可直接在server配置文件中做如下配置: server { listen ; server_name www.fansik.com; access_log /data ...

  3. C#(ASP.NET)隐藏或显示Excel中指定列

    今天写的一个方法,实现Excel指定列的隐藏和显示: 环境:VS2010,OFFICE 2010 代码:#region 隐藏和显示Excel中的一列        /// <summary> ...

  4. iOS oc 调用 swift

    如股票oc要调用swift里面的代码 需要包含固定这个头文件 项目名称 LiqunSwiftDemo-Swift.h #ProjectName#-Swift.h 固定的写法 swift 目的 是取代o ...

  5. 09_Hadoop启动或停止的三种方式及启动脚本

    1.Hadoop启动或停止 1)第一种方式 分别启动 HDFS 和 MapReduce,命令如下: 启动: $ start-dfs.sh $ start-mapred.sh 停止: $ stop-ma ...

  6. qt的udp的初步使用(转)

    该程序实现的功能是:局域网内,每个用户登录到聊天软件,则软件界面的右端可以显示在线用户列表,分别显示的是用户名,主机名,ip地址.软件左边那大块是聊天内容显示界面,这里局域网相当于qq中的qq群,即群 ...

  7. Qt5.2.1交叉编译,带tslib插件

    一: 源码下载地址: 1.1: 平台: 主机:ubuntu 14.04 开发板: cpu arm-cortex-a8,故而我在配置我的qmake.conf的时候填写的为armV7-a QT版本: qt ...

  8. github使用——如何恢复被删去文件。

    首先git删除文件包括以下几种情况 删除本地文件,但是未添加到暂存区: 删除本地文件,并且把删除操作添加到了暂存区: 把暂存区的操作提交到了本地git库: 把本地git库的删除记录推送到了远程服务器g ...

  9. gradle配置笔记

    apply plugin 使用插件 group 包名 version 项目版本 sourceCompatibility 指定编译.java文件的jdk版本 targetCompatibility 确保 ...

  10. RpcException:No provider available for remote service异常

    出现RpcException:No provider available for remote service异常,表示没有可用的服务提供者. 解决思路: 1.检查连接的注册中心是否正确 2.到注册中 ...