bootstrap默认 html｛font-size: 10px;}

rem是一个相对大小的值，它相对于根元素<html>，

比如假设，我们设置html的字体大小的值为html｛font-size: 87.5%;｝（也就是14px）。

然后其他的字体就是将你要的值除以14得到的值；

比如默认的twentytwelve主题大小是960px；换算成rem就是960/14=68.57142857142857rem；

padding的24px也就是24/14=1.714285714285714rem，以此类推。

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

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

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

参考：http://lms.im/html-css/1069.html

CSS3中的Rem值与Px之间的换算的更多相关文章

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

    想给博客换个主题,到处找找不到满意的,最后发现默认主题 twentytwelve 越看越顺眼,于是就想动手改一下用. 看 CSS 文件的时候发现引入了一个新大小单位:rem,虽然 CSS 文件注释里有 ...

  2. rem与px之间的换算（移动端）

    最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...

  3. CSS3中的rem单位

    一.rem介绍 rem是什么? 它的全称是 font size of the root element (根元素的字体大小) 它是CSS3中新增加的一个尺寸(度量)单位,根节点(html)的font- ...

  4. css3中单位rem与.less结合布局

    rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. ...

  5. em与px之间的换算

    任意浏览器的默认字体高度16px(16像素).所有未经调整的浏览器都符合:1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的bo ...

  6. em,pt和px之间的换算

    任意浏览器的默认字体高度16px(16像素).所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的b ...

  7. 如何把设计稿中px值转化为想要的rem值

    首先我们需要的是把尺寸转化为rem值 假如 设计稿中的是 200px*200px的图片 移动端的设计图尺寸一般是640*750; 第一步.  把图片分为若干份(好算即可),每一份的大小就是rem的单位 ...

  8. rem、em、px之间的转换

    rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...

  9. css3中rem和em是干嘛的

    css3中rem和em是干嘛的 一.总结 一句话总结:对rem综合评价是用来做web app它绝对是最合适的人选之一. 这里我特别强调web app,web page就不能使用rem吗,其实也当然可以 ...

随机推荐

  1. iOS开发--遇到ARGB/RGBA怎么办

    一.前言 在iOS开发过程中,我们经常会用16进制来表示色值,一般来说我们都是这样表示的:比如#000000表示黑色,#ffffff表示白色,但是如果我们想来个透明度呢? 接下来就让我们来了解一下怎么 ...

  2. iOS开发--关于TableViewCell的可视化设置细节

    由于时间问题,本篇博文很简略. 1.关于设置Cell的边距问题

  3. 计算机组成原理往年试题以及答案（tzf！！！）

    计算机组成原理往年试题以及答案(下载链接!!!) 太子妃升职记(1~36) ::http://pan.baidu.com/s/1dDP5Kqd

  4. Git详解之三 Git分支

    相关文档 — 更多 Git 基础培训.ppt GIT 使用经验.ppt GIT 介绍.pptx GIT 分支管理是一门艺术.docx Eclipse上GIT插件EGIT使用手册.docx git/gi ...

  5. php示例代码之empty函数

    1 2 3 4 5 6 7 8 9 10 11 <?php     $testVar=0;   if(empty($testVar))   {     echo 'msg:true';   } ...

  6. (转) 一步一步学习ASP.NET 5 (四）- ASP.NET MVC 6四大特性

    转发:微软MVP 卢建晖 的文章,希望对大家有帮助.原文:http://blog.csdn.net/kinfey/article/details/44459625 编者语 : 昨晚写好的文章居然csd ...

  7. 【ASH】如何导出视图DBA_HIST_ACTIVE_SESS_HISTORY的查询结果数据

    [ASH]如何导出视图DBA_HIST_ACTIVE_SESS_HISTORY的查询结果数据 1.1  BLOG文档结构图 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完本文后 ...

  8. mysql自动备份维护shell脚本 (copy)

    #!/bin/bash #Mysql 自动备份 压缩并上传到 指定ftp #设想每天凌晨3点备份mysql #编辑crontab配置文件 # * * * backupmysql.sh #压缩并以&qu ...

  9. nice

    我们在使用$top的时候有一列NI参数,这个参数就是进程的nice值,用来表示进程在系统调度中的优先级,Linux中的进程nice从-20到+19,越小表明调度的优先级越高,用户进程的最小nice值就 ...

  10. Python使用QRCode模块生成二维码

    QRCode官网https://pypi.python.org/pypi/qrcode/5.1 简介python-qrcode是个用来生成二维码图片的第三方模块,依赖于 PIL 模块和 qrcode ...