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. Android开发中遇到的小问题 一

    1)想要ListView活着Girdview左右留些空隙,但Scrollbar要在屏幕最右边 在xml中加入 android:paddingLeft="8dp" android:p ...

  2. 如何为Swift进行宏定义

    这阵子一直在自学Swift, 因为之前iOS的开发一直用Objective-C, 所以习惯了C语言那种宏定义方式, Swift作为一款更加安全的语言, 放弃了C语言中的宏定义, 有效的防止预编译时代码 ...

  3. 【代码笔记】iOS-判断是否是iPhone5

    一,代码. #import "RootViewController.h" // 判断是否是iPhone5 #define iPhone5 ([UIScreen instancesR ...

  4. OC 中的block存储位置

    以下所有在ARC情况下: 一.block块的存储位置(block块入口地址):可能存放在2个地方:代码区.堆区(程序分5个区,还有常量区.全局区和栈区,对于MRC情况下代码还可能存在栈区.关于分区详细 ...

  5. Android 中BaseActivty

    Base接口 IBaseActivity package liu.basedemo.base; /** * 基类接口 * Created by 刘楠 on 2016/7/28 0028.23:05 * ...

  6. iOS之 PJSIP蓝牙外设音频支持

    如题,蓝牙设备作为音频输出,在app中如果包含VoIP那么就要设定当连接蓝牙设备时候是否选择或者支持蓝牙输出 最近在处理一个工单就是公司的voip-app与硬件话机底座联调(蓝牙2.0)坑爹的如果是4 ...

  7. NSArray Sort 排序

    打算实现tableview的生序降序排序 ```js NSArray * rs= [oneArray sortedArrayUsingComparator:NSComparisonResult(RFI ...

  8. CommonJS的模块规范

    CommonJS对模块的定义十分简单,主要分为模块引用.模块定义和模块标识. 1.模块引用 var math = require('math');//这个方法接受模块标识,以此引入一个模块的API到当 ...

  9. 深入理解“HelloWorld”小程序

    对于每个Java程序员来说,HelloWorld是一个再熟悉不过的程序.它很简单,但是这段简单的代码能指引我们去深入理解一些复杂的概念.这篇文章,我将探索我们能从这段简单的代码中学到什么.如果你对He ...

  10. 使用For XML PATH 会影响Cross Apply 返回

    昨天在写语句的时候,遇到了一个现象,其实就是使用 Cross Apply做一个拼接字符串的而已.比如 CREATE TABLE GoodsCatalog (ID INT, Name )) CREATE ...