<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. 023-Spring Boot 服务的注册和发现

    一.概述 服务调用 1.1.nginx方式 1.2.注册中心 二.注册中心[zookeeper] 2.1.安装zookeeper3.4.11 2.2.服务提供方,需要在服务启动时吗.,把服务的信息(I ...

  2. gradle build 找不到tools.jar 解决方法

    import javax.tools.ToolProvider compile(files(((URLClassLoader) ToolProvider.getSystemToolClassLoade ...

  3. eclipse修改web项目部署路径 wtpwebapps webapps 的设置

    eclipse修改web项目部署路径 wtpwebapps   webapps  的设置,在添加完server------>tomcat后,到server控制台进行设置 eclipse默认的部署 ...

  4. LVM逻辑磁盘管理

    一.简介 LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的灵 ...

  5. centos 6.5 设置屏幕保护

    设置屏幕保护:System -> Preferences -> Screensaver.如果需要取消屏幕保护的锁定功能,将Lock screen when screensaver is a ...

  6. 自定义Cell需要注意的问题

    使用xib创建cell时需要在设置单元格样式时使用[[NSBundel mainBundel] loadNibName:@“xib的文件名”owner:self option:nil][0]来初始化单 ...

  7. linux免密登录配置

    第一步:安装openssh-clients yum install -y openssh-clients.x86_64第二步:生成密钥 ssh-keygen第三步:拷贝公钥到其他机器 ssh-copy ...

  8. I.MX6Q(TQIMX6Q/TQE9)学习笔记——内核启动与文件系统挂载

    经过前面的移植,u-boot已经有能力启动内核了,本文主要来看下如何通过之前移植的u-boot来启动内核.如果按照前面的文章完成了LTIB 的编译,那么,Linux的内核应该就会出现rpm/BUILD ...

  9. Shell编程之Expect自动化交互程序

    一.Expect自动化交互程序 1.spawn命令 通过spawn执行一个命令或程序,之后所有的Expect操作都会在这个执行过的命令或程序进程中进行,包括自动交互功能. 语法: spawn [ 选项 ...

  10. 用blastn比对自己建立的数据库

    自己感兴趣的一些序列作为数据库,然后用blastn把测序的read比对到自己建立的数据库中. 1.用fasta文件创建blast数据库 makeblastdb -in input_file -inpu ...