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 或以上才行。
CSS3 中的 rem 值与 px 之间的换算的更多相关文章
- CSS3中的Rem值与Px之间的换算
bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素<html>, 比如假设,我们设置html的字体大小的值为html{font- ...
- rem与px之间的换算（移动端）
最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...
- CSS3中的rem单位
一.rem介绍 rem是什么? 它的全称是 font size of the root element (根元素的字体大小) 它是CSS3中新增加的一个尺寸(度量)单位,根节点(html)的font- ...
- css3中单位rem与.less结合布局
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. ...
- em与px之间的换算
任意浏览器的默认字体高度16px(16像素).所有未经调整的浏览器都符合:1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的bo ...
- em,pt和px之间的换算
任意浏览器的默认字体高度16px(16像素).所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的b ...
- 如何把设计稿中px值转化为想要的rem值
首先我们需要的是把尺寸转化为rem值 假如 设计稿中的是 200px*200px的图片 移动端的设计图尺寸一般是640*750; 第一步. 把图片分为若干份(好算即可),每一份的大小就是rem的单位 ...
- rem、em、px之间的转换
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...
- css3中rem和em是干嘛的
css3中rem和em是干嘛的 一.总结 一句话总结:对rem综合评价是用来做web app它绝对是最合适的人选之一. 这里我特别强调web app,web page就不能使用rem吗,其实也当然可以 ...
随机推荐
- poj 1363
这是一道数据结构的问题,用到了栈的知识.题目大意讲的是每一次有N辆车从A到B,但是要将车辆的顺序重新排列,可以通过中转站C来辅助排列,但是C符合先进后出的原则,这一点和栈的特性相同. 整个重新排序的过 ...
- 开启software protection报错
错误: 我把激活Win8的拿去激活7了 ,开了oem/efi后就ID不可用.开启software protection开不了,错误2.找不到指定文件.用其他软件重新激活则是弹出 ...
- Streaming replication slots in PostgreSQL 9.4
Streaming replication slots are a pending feature in PostgreSQL 9.4, as part of the logical changese ...
- 使用APC缓存PHP opcode
1. 关于版本 我的php版本是5.3.10 最开始使用 APC-3.1.8 编译成功,但是 php -m 得不到扩展 , 换成 APC-3.1.9 后解决. 2. 关于配置 apc.cac ...
- Spring使用环境变量控制配置文件加载
项目中需要用到很多配置文件,不同环境的配置文件是不一样的,因此如果只用一个配置文件,势必会造成配置文件混乱,这里提供一种利用环境变量控制配置文件加载的方法,如下: 一.配置环境变量 如果是window ...
- FFmpeg.exe使用随笔
一.将图片合成为MP4 1.将照片合成为h264 ffmpeg -framerate 12 -i %3d.png -c:v libx264 -pix_fmt yuv420p test.h2642.将h ...
- shiro 标签
在使用Shiro标签库前,首先需要在JSP引入shiro标签: <%@ taglib prefix="shiro" uri="http://shiro.apache ...
- PHP函数getopt详解
短参数 它返回一个包含命令行参数的数组.比如,要获得-a -b 和-c的值,可以这么做: $arguments = getopt("a:b:c:"); 可以用下面的方式运行脚本(有 ...
- Angular（2）
1.自定义指令,直接栗子: note:定义指定是驼峰,2部分 前缀+作用,but 调用 改驼峰首字母大写处为 (-首字母小写) <!DOCTYPE html><html lang= ...
- Spring container vs SpringMVC container(webmvc container)
Difference between applicationContext.xml and spring-servlet.xml in Spring Framework Scenario 1 In c ...