移动端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,所以 ...
随机推荐
- YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 5, column 1:
创建的md文件头部声明中没有加空格.
- python学习之路-第一天-接触python
我的入门就决定用<简明Python教程> <简明Python教程> 1. python的优势 简单:专注于解决问题而不是关注语言本身 易学:容易上手 开源.免费 可移植性非常强 ...
- 剑指offer 面试4题
面试4题: 题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 解题代码一:二 ...
- 剑指offer 面试6题
面试6题: 题目:从尾到头打印链表 输入一个链表,从尾到头打印链表每个节点的值. 解题代码: # -*- coding:utf-8 -*- # class ListNode: # def __init ...
- vmware网络配置(NAt模式)
学习参考: http://www.linuxidc.com/Linux/2017-03/141864.htm(讲解NAT模式) 配置: 1.在virtul Network Editor(虚拟网络编辑器 ...
- RHEL 5 安装gcc
rpm -ivh kernel-headers... rpm -ivh glibc-headers... rpm -ivh glibc-devel... rpm -ivh libgomp.. rpm ...
- XML文件结构和基本语法
XML文件的结构性内容,包括节点关系以及属性内容等等.元素是组成XML的最基本的单位,它由开始标记,属性和结束标记组成.就是一个元素的例子,每个元素必须有一个元素名,元素可以若干个属性以及属性值. x ...
- 【leetcode刷题笔记】Wildcard Matching
Implement wildcard pattern matching with support for '?' and '*'. '?' Matches any single character. ...
- P4121 [WC2005]双面棋盘
题目 P4121 [WC2005]双面棋盘 貌似是刘汝佳出的题目?? 做法 线段树维护并查集 线段树分治\(1\)~\(n\)行,我们要考虑维护的肯定是黑.白各自的联通块数量 考虑区间合并,其实就与中 ...
- INSPIRED启示录 读书笔记 - 第29章 大公司如何创新
大公司实现创新的方法 20%法则:谷歌的程序员有20%的工作时间可以用来从事创新研究,这个方法最早是从施乐帕克研究所学来的.20%法则鼓励普通员工自己尝试各种想法,让员工打心底愿意倾注更多的激情和汗水 ...