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 ...
随机推荐
- log4j2教程【RollingFileAppender】
说明 rollover 表示的是当日志文件大小满足指定大小后,就生成一个新的文件的过程. RollingFileAppender RollingFileAppender是一个OutputStreamA ...
- 从centos镜像创建maven仓库
创建镜像 1. 使用centos7作为基础镜像2. 将jdk1.8(官方要求1.8)和nexus3解压后的两个文件放进cp进去3. export环境变量后启动一下试一试4. docker commit ...
- REST AND SOAP
REST,即Representational State Transfer的缩写.直接翻译的意思是"表现层状态转化".它是一种互联网应用程序的API设计理念:URL定位资源,用HT ...
- 微信小程序数组对象
xml:<block wx:for="{{post_key}}" wx:for-item="{{item}}"></block> dat ...
- SNMP理解
前两天项目要求一个附加功能,远程监视服务器的运行状况,要定期监视指定端口,指定业务,还包括服务器的磁盘空间,内存,CPU使用率等等.这头俩事还好说,ping和telnet也就搞定了,实在不行就开个so ...
- Mask rcn nanchor部分理解
Anchors Mask 生成锚框本质与SSD一样中心点个数等于特征层像素数框体生成围绕中心点Bbox的坐标是要归一化到0~1之间的,都是相对于输入图片的大小.基本生成方式:H乘np.sqrt(anc ...
- Oracle初级优化sql
1.选择最有效率的表名顺序(只在基于规则的优化器中有效):ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先处理, ...
- js filter 数组去重
let arr = [1, 2, 3, 10, 4, 5, 1, 3, 5]; let stateNumArr = arr.filter((item, index, array) => { re ...
- 算法(第四版)C# 习题题解——2.2
写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 查找更为方便的版本见:http ...
- 解决docker主机配置了DaoCloud.io的加速后重启失败问题Failed to start Docker Application Container Engine
问题说明 正常运行的docker主机配置了DaoCloud.io加速后重启报如下错 解决过程 问题原因: 重新配置加速器后发现,daocloud的配置信息是写在/etc/docker/daemon.j ...