移动端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,所以 ...
随机推荐
- spring mvc 关键接口 HandlerMapping HandlerAdapter
HandlerMapping Spring mvc 使用HandlerMapping来找到并保存url请求和处理函数间的mapping关系. 以DefaultAnnotationHandlerMa ...
- [JavaScript]常用的页面倒计时
倒计时是web开发中比较常用的,以下列出常用的几个倒计时方法,仅供参考: 一 :页面倒计时 原理一般都是通过 setTimeout 或 setInterval 函数实现,下面是一个最简单的倒计时 &l ...
- LeetCode:全排列【46】
LeetCode:全排列[46] 题目描述 给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2 ...
- Incomplete response received from application
RAILS_ENV=production rake secret 将输出的一大串字码粘贴到rails工程中/config/secrets.yml去,替换掉该文件中的<%= ENV["S ...
- IM协议
四种协议英文全称与简称 1->IMPP(Instant Messaging And PresenceProtocol):即时信息和空间协议 2->PRIM(Presence and Ins ...
- 测试 js 方法运行时间
早期测速的时候是这样的,呵呵呵,一开始还挺爽的 function testFunctionTime(fn) { var start = new Date().getTime(); if (fn) fn ...
- CentOS 5下freeswitch中集成使用ekho实现TTS功能二
三:以上Festival安装完成以后回到ekho安装目录: 执行./configure --enable-festival 前 更改configure 1:替换 #AC_DEFINE(ENABLE_F ...
- python的对象类型-----列表&元组&字典
列表: #定义列表 l=[1,'a',[3,4]] #l=list([1,'a',[3,4]]) #取值 print(l[0]) print(l[2][0]) l=[1,2,[['a','b'],'c ...
- R读取大数据data.table包之fread
>library(data.table)>data=fread("10000000.txt")>Read 9999999 rows and 71 (of 71) ...
- INSPIRED启示录 读书笔记 - 第1章 关键角色及其职责
现代软件产品团队 1.产品经理的主要职责分为两项:评估产品机会和定义要开发的产品 2.用户体验设计师(由多种角色组成,这里面最关键的是交互设计师) 交互设计师负责深入理解目标用户,设计有价值 ...