// rem尺寸转换函数开始
(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);
// rem尺寸转换函数接受

像素与rem转换的更多相关文章

  1. 微信小程序开发-rem转换rpx小工具

    实现原理: 对样式进行格式化,然后根据 “rem” 进行拆分,这样就会拆分成一个数组 [str1,str2,str3...,str6], 除了最后一个元素,前边的元素都会以 “rem” 样式的数值结尾 ...

  2. 字体的大小(pt)和像素(px)如何转换?

    px:相对长度单位.像素(Pixel). pt:绝对长度单位.点(Point). 1in = 2.54cm = 25.4 mm = 72pt = 6pc 具体换算是: Points Pixels Em ...

  3. vue2.0 类淘宝不同屏幕适配及px与rem转换问题

    因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没 ...

  4. vue 项目中px转rem转换问题(postcss-px2rem)

    1.安装postcss-px2rem npm install postcss-px2rem --save npm install postcss-px2rem --save 2.配置px2rem 在配 ...

  5. android开发之dip,dp与px像素之间的转换工具,可能用的不多,但是有总比没有好吧。

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985,转载请说明出处. 下面是介绍: 免积分下载地址:http://download.csdn.net/de ...

  6. Rem与Px的转换[转载]

    原文:http://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html rem是CSS3中新增加的一个单位 ...

  7. iOS关于图片点到像素转换之杂谈

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 不管是以什么方法生成的图片,是从磁盘上读取的,还是从其他对象中 ...

  8. FFmpeg(10)-利用FFmpeg进行视频像素格式和尺寸的转换(sws_getCachedContext(), sws_scale())

    一.包含头文件和库文件 像素格式的相关函数包含在 libswscale.so 库中,CMakeLists需要做下列改动: # swscale add_library(swscale SHARED IM ...

  9. Sass基础——Rem与Px的转换

    rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一 ...

随机推荐

  1. Android笔记——eclipse快捷键

    查看快捷键定义的地方 Window->Preferences->General->Keys. 编辑相关快捷键 1. [ALT+/] 自动提示方法 此快捷键为用户编辑的好帮手,能为用户 ...

  2. react + iscroll5 实现完美 下拉刷新,上拉加载

    经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能. 一开始直接采用了react-iscroll插件,它是基于iscroll插件开发的组件.但是开发过程中,发现 ...

  3. 由于Replication,DBCC Shrink不能收缩Log File

    使用Backup创建测试环境之后,发现testdb的Log File过大,达到400GB,由于测试环境实际上不需要这么大的Log Space,占用400GB的Disk Space实在浪费Disk Re ...

  4. JS-underfined is not a function

  5. 自用迷你版的Deferred

    啥也不说贴代码,项目用 /** * 迷你版的deferred */ function Deferred(func) { if (this instanceof Deferred === false) ...

  6. SubSonic3.0.0.4.3源码包与调用Dll

    版本修改历史 3.0.0.4.3版修复了下面问题: 修正多表关联查询时,使用左关联和右关联出错问题修正DbDataProvider.cs类的ToEnumerable函数打开数据库链接后没有关闭的问题添 ...

  7. 1Z0-053 争议题目解析705

    1Z0-053 争议题目解析705 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 705.View Exhibit1 to examine the DATA disk group ...

  8. 简析GeoServer服务的内部文件组织以及GeoServer自动化服务发布工具的开发思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 通过GeoServer发布的服务,在GeoServer内部有 ...

  9. 【集合框架】JDK1.8源码分析之HashMap & LinkedHashMap迭代器(三)

    一.前言 在遍历HashMap与LinkedHashMap时,我们通常都会使用到迭代器,而HashMap的迭代器与LinkedHashMap迭代器是如何工作的呢?下面我们来一起分析分析. 二.迭代器继 ...

  10. X240 Win10企业版 14279版本 电池标尺白底问题

    win10系统更新到14279版本: 电池标尺显示白底,而且右键也不可打开"启动电池管理器-" (1)首先安装lenovo settings 下载地址:http://think.l ...