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

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

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

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

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

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

另外rem在ie8及ie8以下的版本不支持外其他浏览器都支持，如果要考虑ie8及以下，设置个px再设置个rem就可以了。

px和rem换算的更多相关文章

  1. CSS3中的Rem值与Px之间的换算

    bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素<html>, 比如假设,我们设置html的字体大小的值为html{font- ...

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

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

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

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

  4. Sublime Text中安装插件来实现px与rem间的换算

    今天在群里无意中看到了群友分享的一篇关于移动端的文章.里面其他内容我倒不大感兴趣,反而是rem让我提起了兴趣. 首先来谈一下rem,rem是CSS3中新增加的一个单位值,它和em单位一样,都是一个相对 ...

  5. px与rem关系及转换

    PX特点 1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能够调整px和em,rem,但是96%以上的中 ...

  6. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  7. px,em,rem的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  8. 前端页面适配的rem换算

    为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...

  9. 前端页面的适配使用rem换算

    前端页面的适配使用rem换算 https://www.cnblogs.com/liangxuru/p/6970629.html 注:本文转载之处:https://www.cnblogs.com/ann ...

随机推荐

  1. 原子操作atomic

    一.原子操作:即不可再细分的操作,最小的执行单位,在操作完之前都不会被任何事件中断. 整型原子操作:对int类型的操作变成原子操作.                 int i = 0;       ...

  2. Autoware显示用户界面细节

    https://blog.csdn.net/jianxuezixuan/article/details/86015224

  3. Mybatis框架+原理

    https://www.cnblogs.com/luoxn28/p/6417892.html(转载,蛮详细的)

  4. IDEA设置maven项目的默认配置

    IDEA设置maven项目的默认配置 问题描述 很多刚使用idea的人,用其创建maven工程时会遇到一个问题,明明给项目设置了新的maven配置(使用阿里镜像源或者自定义maven版本),但是重新打 ...

  5. 转：Linux 2.4.x内核软中断机制

    源地址:http://www.ibm.com/developerworks/cn/linux/kernel/interrupt/ Linux 2.4.x内核软中断机制 杨沙洲 (pubb@163.ne ...

  6. bootstrap-table的简要使用

    bttable功能强大!同时支持申明方式和编程方式来使用!是wenzhixin主导开发一款开源的表格控件! 文档比较详尽,但要求初学者已经比较熟悉js,jquey等基本内容,否则可能许多代码无法阅读! ...

  7. diango中orm的惰性机制

    那么首先要知道什么是ORM 专业化的角度来说:叫对象关系映射(Object-Relation Mapping)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 那具体ORM是什么呢?:( ...

  8. Python学习之函数（多层函数）、re模块的正则匹配--计算复杂加减乘除

    头疼,其实这个程序在我看的视频当中是当做re模块的运用来进行测试的,而到了我这里就成了简化版的了,因为我实在是做吐了,恕小弟无能,只能做简化版的.为何说是简化版呢,因为要求是给的计算式是多层嵌套的小括 ...

  9. SpringBoot防XSS攻击

    1 . pom中增加依赖 <!-- xss过滤组件 --> <dependency> <groupId>org.jsoup</groupId> < ...

  10. bzoj2547: [Ctsc2002]玩具兵

    划了一天水,其实我还是有点愧疚的. 传送门 其实是水题,然而我真是太蠢了... 首先不考虑天兵,其他兵要到一个点去一定是通过它-另一种兵-它……这样多次交换的,并且交换对象是无所谓的,和它换的兵最终会 ...