//jquery实现
// $(function(){
// $(window).on("resize",function(){
// var width=$(window).width();
// var fontSize=width/640*100;
// if(width>=640){
// fontSize=100;
// }else if(width <=320){
// fontSize=50;
// }
// $("html").css("font-size",fontSize);
// }).trigger("resize"); // })
//原生实现
(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
//将根据已有的meta标签来设置缩放比例
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
} function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));

  

CSS3 中的 rem 值与 px 之间的换算

想给博客换个主题,到处找找不到满意的,最后发现默认主题 twentytwelve 越看越顺眼,于是就想动手改一下用。

看 CSS 文件的时候发现引入了一个新大小单位:rem,虽然 CSS 文件注释里有介绍,但看半天拿着手机上的计算器计算了几下愣是没搞明白,怕是新东西搜出来的都是英文看着累就没找 google,而是百度了一下,百度的结果就是看到一篇文章被转来转去,来转去,转去,去。。。

郁闷之下回到主题的 CSS 再看那介绍,打开电脑的计算器,一计算,居然被我整明白了,原来原先计算值不等是因为我手机的计算器设置了只保留小数点后两位的原因,真是囧。。。

其实 px 和 em 的关系我都没整明白,就来说这个 rem 让我觉得很忐忑的。。。

评论里有热心同学一句话解决了我上面 px 和 em 关系问题:

em 以父元素为参照

rem 和 em 一样,也是一个相对大小的值,它是相对于根元素 <html>,比如假设,我们设置 html 的字体大小的值为 html{font-size: 87.5%;}(也就是 14px,这是 twentytwelve 默认主题里的设置)。然后其他的字体就是将你要的值除以 14 得到的值;比如默认的twentytwelve主题大小是 960px;换算成 rem 就是 960/14=68.57142857142857rem(我这个用电脑的计算器计算的,比默认的更精确,嘿嘿);padding 的 24px 也就是 24/14=1.714285714285714rem(当然还是比 css 文件里的精确),以此类推。

简单直白的说法,可以用评论里同学的一句话来表达:

如果你没有在根元素指定参照值,那浏览器默认就是 1rem 为 16px,如果你指定了值假设为 20px,那 1rem 就为 20px。

上面的 14 是个变量,相对于你对根元素 html 字体大小的设定,如果你设定的是 62.5%,那除数就变成 10 了,对照表如右图:

用这个 rem 单位的好处有啥我不知道,不过如果你根元素的字体大小选 62.5%,那 px 和 rem 之间的换算就是 px 直接除以 10 就得到 rem 了,这比 em 简单多了,到现在我都没搞清楚 em 和 px 之间是如何换算的。

另外 rem 在 ie8 及以下的版本不支持外其他浏览器都支持,如果你要考虑 ie8 及一下,可以像 twentytwelve 默认文件那样设置个 px 再设置个 rem 就可以了。

再另外,有许多朋友问我:为啥 html 设置成 62.5%,或者 10px 时,这种换算无效了呢?经过研究发现,不知道什么时候开始,小于 12px 或者 75% 的字体大小 rem 确实不支持这种换算,这可能与现在有些浏览器不支持 12px 以下的大小有关。所以,记住一点:如果要使用 rem 单位,html 的字体默认大小必须设置为 12px 或以上才行。

rem计算的更多相关文章

  1. 一个因为系统字号设置导致的rem计算渲染异常问题

    测试同学突然拿着一部手机过来说,H5渲染各个元素都变大了,有些元素撑出了屏幕外面. 本来以为是某个Webview的渲染兼容问题,结果发现所有的浏览器都这样. 莫名其妙,隐约感觉是 rem计算出了问题, ...

  2. rem计算适配

    git地址:https://github.com/wjf444128852/about-web-rem 建议在CSS引入之前引入下面这段JS代码,比例1rem:100px. 用了这个JS就不用在CSS ...

  3. 移动端rem计算

    教你如何用 lib-flexible 实现移动端H5页面适配 2017年07月22日 16:01:24 Pwcong 阅读数:18872    版权声明:本文为博主原创文章,未经博主允许不得转载. h ...

  4. css rem计算

    先抛出一个问题:为什么要选择rem? px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力, ...

  5. 手机端布局 - rem计算

    功能说明:以一个640px的宽度为基准,最小不低于320px,当大于640px时,让其在页面中居中. 如果正处于640 - 320之中的,都按照js进行等比例的缩放. 这里我们规定1rem = 100 ...

  6. h5 rem计算

    设置html默认font-size: 100px,此时默认的页面的width是750px,然后根据手机大小改变html节点的font-size,从而改变rem的大小,代码如下: <script& ...

  7. 移动端单位rem计算

    !(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...

  8. 大前端学习笔记整理【五】rem与px换算的计算方式

    前言 这段时间的小项目中算是真正意义上使用了rem来进行移动端的页面布局,项目结束了我反思了一下之前的对于rem的使用...原来我以前对rem用法完全是在搞笑啊!!结合这次这个小项目,我觉得我也有必要 ...

  9. 谈谈rem

    用rem已久但是对于它的理解似乎一直都有偏差,使用的时候多采用的是html的font-size:62.5%;然后按照1rem=10px这样来使用.所以我一直不明白,这个rem到底哪里是相对单位了,也不 ...

随机推荐

  1. opencv关于Mat类中的Scalar()---颜色赋值

    这个 CvScalar就是一个可以用来存放4个double数值的数组(O'Reilly的书上写的是4个整型成员):一般用来存放像素值(不一定是灰度值哦)的,最多可以存放4个通道的. typedef s ...

  2. window下maven的环境搭建

    一.下载 官网下载地址 二.maven的安装配置 1.环境变量的配置 1)新建环境变量MAVEN_HOME,值如下: D:\install\develop\apache-maven- 2)修改环境变量 ...

  3. svn如何根据提交日志信息回退版本

    问题场景: 1 记得提交的日志信息中包含openssl,但是不记得这次提交的版本号revesion,是svn初始化后中间的某次提交: 2 svn环境的操作系统平台为Fedora, 即命令行下:而且sv ...

  4. 记录在Ubuntu 18.04系统中安装Apache, MySQL和PHP环境

    虽然我们在Linux VPS.服务器安装WEB环境比较方便,可以选择面板或者一键包,但是有些我们需要深入学习的网友不会选择一键安装,而是会尝试编译安装.这样可以学到一些内在的技术.一般我们较为习惯选择 ...

  5. WebService CXF知识总结

    2018-10-23 <wsdl:service name="Iptv3aBasicService"> 客户端client信息,CXF会生成一个名为Iptv3ABasi ...

  6. H5获取原生传过来的值

    项目开发中,可能会涉及到原生页面跳转到H5页面,然后H5页面要返回原生页面,通常使用的方法就会失效:this.$router.go(-1);怎么解决呢,这样就需要原生跳转H5页面的时候,在URL里传递 ...

  7. 《修炼之道:.NET开发要点精讲》读书笔记(一)

    CLR 公共语言运行库 没有CLR的存在,就不能讲该中间件转换成对应操作系统中的机器指令. 程序集是非完全编译的产物,它兼备了源代码和本地代码的特性,是一种介于源代码和本地代码之间的独立存在的一种数据 ...

  8. 从阿里巴巴面试题到java类加载机制

    首先很经典的阿里巴巴面试题 加上我自己的一些疑惑代码 public class Text { public static int k = 0; public final int k1 = 3; //自 ...

  9. mysql时间戳转换

    数据表中time是时间戳格式,转化成正常的时间格式 SELECT id,TIME,FROM_UNIXTIME(TIME,'%Y-%m-%d %H:%m:%S'),incline_id FROM inc ...

  10. Python小技巧:运行目录或ZIP文件

    在写Python程序时,将不同功能代码写在不同文件中是一个好习惯,但是对于某些情况.如需要将脚本提供给别人运行使用,如若将程序写在几个文件中,则需要将文件都发给他人.别人就需要管理不同文件,这样对于别 ...