// 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. Trace Flag

    Trace Flag能够影响Sql Server的行为,主要用于diagnose performance issue,官方解释是: Trace flags are used to temporaril ...

  2. Cordova+Asp.net Mvc+GIS跨平台移动应用开发实战1-系统初步搭建(附演示,apk,全部源码)

    1.前言 身处在移动互联网的今天,移动应用开发炙手可热,身为程序猿的我们怎么能错过开发一款我们自己的APP.本人算是一个基于.net的GIS开发入门者(马上就大四啦), 暑假在学校参加GIS比赛有大把 ...

  3. Powershell 切换IE代理

    买了一个穿越防火墙的代理,在 Windows 下每次手动设置代理都好麻烦,最后不断尝试 Powershell 来设置,最后也终于成功了.   其实利用 Powershell 来设置 IE 的代理,就是 ...

  4. 传智播客--WPF基础视频学习--sender解释(小白内容)

    sender是激发该事件的对象,如果用在Button的双击点击事件上的话,就是只当前点击的对象 用例子来说明一下,有两个Button控件,分别为1和2,同时绑定一个Button_Click事件 pri ...

  5. ZOJ Problem Set - 1365 Mileage Bank

    题目不难,主要说下这道题目在输入终止上的问题: 题目要求当输入为0时一次case结束,当输入为#时整个输入全部结束,可以用如下格式解决 while(scanf("%s",str)! ...

  6. JavaMail基础案例开发

    Java邮件开发案例 所需jar包有:mailapi.jar,smtp.jar 一.单独邮件发送案例 package com.itRed.javamail; import java.util.Prop ...

  7. 详解用Navicat工具将Excel中的数据导入Mysql中

    第一步:首先需要准备好有数据的excel: 第二步:选择"文件"->"另存为",保存为"CSV(逗号分隔)(*.csv)",将exce ...

  8. git版本回退, github版本回退

    上周提交了更改,过了周末回来说要撤销上个story.于是,需要找到上周提交的版本,rollback回来. git版本管理命令,自从习惯使用管理工具之后就很少接触了,当突然寻找其他指令的时候就成浆糊了, ...

  9. JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录

    前言  最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限.  即使在页面 ...

  10. 微信小程序,我的英雄列表

    最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此. 1.下载微信开发者工具 官网链接:https://mp.weixin.qq. ...