移动端rem设置,自动更改html<font-size>
<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>的更多相关文章
- 移动端rem设置(部分安卓机型不兼容)
(function(win) { var doc = win.document; var docEl = doc.documentElement; var tid; function refreshR ...
- hbuilder设置自动px 转换成rem
hbuilder里面有自动换算的 需要设置一下:工具–>选项–>Hbuilder–>代码助手设置.里面有个px自动转rem设置,按自己的实际情况设置就可以在每次输入px的时候有提示了 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 移动端rem单位用法[转]
标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...
- 浅谈移动端rem的用法
一 什么是rem? “font size of the root element 这是w3c的定义 也就是说是相对于根节点(html节点)的字体大小的单位. 目前主流的浏览器基本都支持rem这个单位, ...
- 移动端rem的用法
标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...
- 移动端rem适配屏幕
九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...
- 移动端rem单位用法
1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们 ...
- 移动端rem布局实现(vw)
什么是rem?在W3C官网上是这样描述的:“font size of the root element (根元素的字体大小)”.就是说rem是相当于html的,因为网页的默认字体大小是 16px,所以 ...
随机推荐
- Linux中的awk命令
awk '条件1{动作1} 条件2{动作2} ...' 文件名 条件: BEGIN 在处理文件里的第一行数据之前执行 END 在处理完文件里的最后一行数据 ...
- 0402-服务注册与发现-Eureka Server使用、将服务注册到Eureka server上
一.Eureka Server使用 官方文档地址:http://cloud.spring.io/spring-cloud-static/Edgware.SR3/single/spring-cloud. ...
- 从1到N中1的个数
示例1,2...9,10,11中有四个1 int getNumber(int n) { int count = 0; int factor = 1; int low = 0; int cur = 0; ...
- 201703 ABAP面试题002
转自: ABAP 面试问题及答案(一):数据库更新及更改 SAP Standard (转) 问题一:锁对象(Lock Object)和 FM(Function Module)激活锁定对象时,产生的 F ...
- CoreThink主题开发(九)使用H-ui开发博客主题之用户个人主页
感谢H-ui.感谢CoreThink! 效果图: 这里使用table布局 /Theme/Blog/User/Index/home.html <extend name="$_home_ ...
- C# 函数2
//读写INI public class GF_INI { [DllImport("kernel32")] private stat ...
- JAVA 遍历文件夹下文件并更改文件名称
周末因为一些原因,需要批量更改一些文件的名称,使其随机,就随手写了点代码. 增加一个随机字母: public static void changeName(String path){ File fil ...
- HDF及HDF-EOS数据格式简介
HDF-EOS数据格式介绍 HDF(Hierarchy Data Format )数据格式是美国伊利诺伊大学国家超级计算应用中心(NCSA ,National Central for Super co ...
- javascript;select动态添加和删除option
<select id="sltCity"></select> //添加Option. var optionObj = new Option(text, va ...
- $《第一行代码:Android》读书笔记——第9章 服务
(一)Service简介 服务适合执行那种不需要和用户交互而且还要长期运行的任务.所有的服务代码都是默认运行在主线程中,需要在服务内部手动添加子线程,在子线程中执行耗时任务. (二)线程 1.线程 ...