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 ...
随机推荐
- ARM Mcp2515添加驱动
Mcp2515添加驱动 2012-01-10 21:39:32 上图1: 上图2: 上图3: 之前完成了spi接口驱动,所以mcp2515也是通过spi来读写数据的.就是多加一个中断脚. 另外在2 ...
- Appium(一)---环境搭建的一些问题
最近开始学习Appium,一款很不错的自动化测试工具,网上已经有大量的环境搭建教程,我就不再细说,我搭建环境时主要参考如下两个博客https://www.cnblogs.com/yoyoketang/ ...
- C++中的纯虚方法
在学习数据结构中优先级队列时遇到纯虚方法的定义,一时没想起来,便查了一下. 1.纯虚方法解决什么样的问题,为什么要设计出纯虚方法? 考虑下面的需求,基类声明了一个方法,这个方法只针对具体的子类才有意义 ...
- Java初始化块
1.使用初始化块 [修饰符]{ //初始化块的可执行性代码 } 初始化块虽然也是Java类的一种成员,但它没有名字,也就没有标识,因此无法通过类.对象来调用初始化块.初始化块只在创建Java对象时隐式 ...
- id、class等各种选择器总结
1. id 选择器 # class 选择器 . 标签 选择器 标签名 群组 ...
- [C++ Primer Plus] 第8章、函数探幽(一)程序清单——内联、引用、格式化输入输出、模板、decltype
程序清单8.1(inline内联函数) #include<iostream> using namespace std; inline double square(double x) {// ...
- 线程池如何复用一个线程-- ThreadPoolExecutor的实现(未完)
任务是一组逻辑工作单元,而线程则是使任务异步执行的机制.在Java中,Runnable对象代表一个任务,Thread对象负责创建一个线程执行这个任务. 前提:1. 程序需要处理大量任务 2. 任务的执 ...
- day06深浅拷贝,元组,字典,集合
深浅拷贝 # 值拷贝:应用场景最多 ls = [1, 'abc', [10]] ls1 = ls # ls1直接将ls中存放的地址拿过来 # ls内部的值发生任何变化,ls1都会随之变化 ls2 = ...
- 本地Git仓库和Github仓库的关联
1.我们首先创建一个文件夹(用于保存本地仓) 在我们想要创建的路径下右键鼠标打开Git Bash Here(创建一个文件夹,并进入文件夹) 2.通过命令git init把我们刚才创建的文件夹变成Git ...
- tcp的三次握手,四次挥手
为了更好的记住知识点,所以将最近学习的知识点记录下来: 最开始A和B都处于closed(关闭连接状态) 1.tcp的第一次握手:客户端A 向服务器端B 发送请求连接报文段(包含SYN=1,初始序号s ...