rem 转 px
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
第二种方法
(function() {
var newRem = function() {
var html = document.documentElement;
html.style.fontSize = html.getBoundingClientRect().width / 16 + 'px';
};
window.addEventListener('resize', newRem, false);
newRem();
})();
rem 转 px的更多相关文章
- rem与px的转换
rem与px的转换 引用自http://caibaojian.com/rem-and-px.html A-A+ 前端博客•前端开发教程•rem•3702View0 rem是相对于根元素<html ...
- 移动端适配方案以及rem和px之间的转换
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- EM vs REM vs PX,为什么你不应该”只用px“”
Actually this artical is from other person's opnion ,i just put it into chinese,and this means a ver ...
- rem与px之间的换算(移动端)
最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...
- 简谈CSS 中的 em,rem,px,%
在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...
- rem和px
做过一段时间的H5页面,但是对于rem与px的换算还是比较模糊,总是引用一段脚本,也没有深究过为什么,就稀里糊涂的用了,遇到一些细微的地方,总是不知道是什么原因导致的,我总是只要能完成效果就行,全然不 ...
- mobile css & rem & em & px
mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...
- rem、px、em之间的区别以及网页响应式设计写法
个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激 ...
- em换算px,rem换算px
<body> <style type="text/css" rel="stylesheet"> html,body{ font-size ...
- rem 与 px 手机页面自适应
rem相对于根元素html的,em相对于父元素的.rem和em相对大小的值默认情况下如果你没有在根元素指定参照值,那浏览器默认就是 1rem 为 16px,如果你指定了值假设为 20px,那 1rem ...
随机推荐
- Excel坐标自动在AutoCad绘图_3
众所周知,Excel对数据处理的功能非常强大,它可以进行数据处理.统计分析已经辅助决策的操作,该软件已经渗透到各个领域.作为一个测绘人,GISer, 也经常利用excel完成一些测量表格的自动化计算, ...
- python多线程不能利用多核cpu,但有时候多线程确实比单线程快。
python 为什么不能利用多核 CPU GIL 其实是因为在 python中有一个 GIL( Global Interpreter Lock),中文为:全局解释器锁. 1.最开始时候设计GIL是 ...
- mysql 事物没提交导致事物一直运行解决方案
1.设置 innodb_kill_idle_transaction 参数, 可以永久避免 https://dbaplus.cn/news-11-974-1.html
- Linux CAN Shell 测试脚本程序
2012-01-13 22:57:14 为我的开发板2440做二次开发,添加了can驱动,做了驱动测试程序,没理由不添加一个测试脚本程序啊!修改了测试程序,使应用程序更加灵活,添加了一下传递参数.接着 ...
- Linux虚拟机配置(新猿旺学习总结)
Linux系统环境部署 安装VMware虚拟机 选择安装位置要预留出20G虚拟机空间点击VM虚拟机安装包à一路下一步直至安装完成à进入界面 创建虚拟机 选择典型à找到安装镜像文件à安装机名称和位置选择 ...
- Serializable中的serialVersionUID
有序列化,就必然有反序列化!比如在A端为UserLogin(见上一篇对象序列化)做了序列化,然后在B端进行反序列化. 首先需要,A端和B端都定义有相同的UserLogin类.可是,万一两端的UserL ...
- Docker初始
如今Docker的使用已经非常普遍,特别在一线互联网公司.使用Docker技术可以帮助企业快速水平扩展服务,从而到达弹性部署业务的能力.在云服务概念兴起之后,Docker的使用场景和范围进一步发展,如 ...
- hashlib hmac configparser subprocess xlrd xlwt
hashlib模块:加密 import hashlib # 基本使用 cipher = hashlib.md5('需要加密的数据的二进制形式'.encode('utf-8')) print(ciphe ...
- Java基础学习-基本数据类型变量的定义和使用
注意:如果使用notepad++编码,在cmd控制台编译时报错(编码GBK的不可映射字符),可以参考如下链接进行设置:https://jingyan.baidu.com/article/e3c78d6 ...
- 在Pycharm中使用Pandas时输出结果中列被省略的解决办法
在使用pycharm学习pandas的过程中我发现好多时候会发生不能输出所有列的情况,上网搜了一下,发现解决的办法是使用一个输出控制的函数. 在下面的代码中我们只是输出starbucks_store_ ...