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吗,其实也当然可以 ...
随机推荐
- PHP curl传 json字符串
$ch = curl_init(); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_URL, $url); curl_seto ...
- MySql变量,
http://blog.csdn.net/rdarda/article/details/7878836 1.变量的定义 在Mysql里面可以像我们写代码中一样定义变量来保持中间结果,看下面的格式: [ ...
- CSS之利用text-indent隐藏文字用图片当Login
html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- jquery选择器之层级选择器
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- osx 文本编辑工具下载地址Sublime Text 3
下载地址: http://www.sublimetext.com/3 Sublime Text 是一个代码编辑器(Sublime Text 3是收费软件,但可以无限期试用),也是HTML和散文先进的文 ...
- .NET EXCEL NPOI 图片
今天闲来无事写了下 “ .NET 用 NPOI 组件 将 图片文件 写到 EXCEL 中 ” 先看效果: 头是我加的,这个应该不是难事! 再看代码: private void button1_C ...
- [Linux] LVM的条带化
一.什么是条带化 当多个进程同时访问一个磁盘时,可能会出现磁盘冲突.磁盘系统对访问次数(每秒的IO操作,IOPS)和数据传输速率(读写速率,TPS)有限制. 当达到这些限制时,后面需要访问磁盘的进程就 ...
- pandas入门
[原]十分钟搞定pandas 本文是对pandas官方网站上<10 Minutes to pandas>的一个简单的翻译,原文在这里.这篇文章是对pandas的一个简单的介绍,详细的介 ...
- Android API Guides 学习笔记---Application Fundamentals(一)
今天开始学习google官网上的API guides ,主要读了Application Fundamentals这一章节,此章节介绍了一个App的基本组成,共包括四大部分内容. 1. App ...
- Mono addin 学习笔记 2
下面分析用xml描述文件的方式来进行插件定义 定义扩展点如下: public interface ISnippetProvider { string GetText (string shortcut) ...