移动端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,所以 ...
随机推荐
- pycharm 用鼠标滚动调整字体大小
- C++程序设计练习(一)
// 1. 在屏幕上输出内容 #include<iostream> using namespace std; int main(){ int i= 1; cout<<" ...
- redis3.2.8安装过程
1.安装依赖的包yum -y install jemalloc gcc2.解压redis的安装文件tar xf redis-3.2.8.tar.gz3.进入redis-3.2.8目录cd redis- ...
- C#托管代码 CLR
托管代码 是直接编译成机器码,而是编译成中间语言 IL,由 CLR 托管运行. 托管代码就是把底层的一些操作(如内存的读取,释放)全都封装起来了,把有关内存管理的操作全都由CLR来管理, C#使用垃圾 ...
- BigDecimal类型、Long类型判断值是否相等,以及BigDecimal加减乘除
//Long是需要比较精度的,所以要用longValueif(project.getFriendId().longValue() != friendId.longValue()) { return t ...
- Linux基础系列:常用命令(2)
作业一: 1) 新建用户natasha,uid为1000,gid为555,备注信息为“master” groupadd -g 555 natasha useradd -u 1000 -g 555 -c ...
- active scaffold
模板文件路径:/.rvm/gems/ruby-2.2.3/gems/active_scaffold-3.5.3/app/views/active_scaffold_overrides
- 【Flask】Sqlalchemy join
### join:1. join分为left join(左外连接)和right join(右外连接)以及内连接(等值连接).2. 参考的网页:http://www.jb51.net/article/1 ...
- Asp.net 5 (MVC6) Areas 分区
1. Startup.cs 类的 Configure方法中, 加入Area路由设置代码: //app.UseMvcWithDefaultRoute(); app.UseMvc(routes=> ...
- 【P2514】工厂选址(贪心)
看到题了不首先应该看看数据范围确定一下算法么,这个题的数据范围大约可以支持到O(nmlogm),所以肯定不是搜索什么的,DP貌似至少也要n^2m,所以可以想一些其他的.对于题目的输入,我们发现这些输入 ...