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. Linux 内存缓存占用过大，Centos7设置定时清除buff/cache的脚本

    Linux系统buff/cache 中缓存数据占用内存过高,定时清理buff/cache ,释放系统内存 root权限创建脚本文件: touch cleanCache.sh && vi ...

  2. k8s 各个概念解释

    pods ,  k8s 的核心, 所有的的操作都是围绕 pod , pod 可以认为是多个容器的捆绑.pod 里的容器里共享 cpu 网络  存储.                          ...

  3. MyBatis配置文件(七)－－environments运行环境

    一.environments配置信息: environments的作用是用来配置数据库信息,可以配置多个,其有两个可配的子元素,分别是:事务管理器transactionManager和数据源dataS ...

  4. MyBatis配置文件(二)－－settings配置

    settings是MyBatis中最复杂的配置,它能影响MyBatis底层的运行,大部分情况下使用默认值,只需要修改一些常用的规则即可.常用规则有自动映射.驼峰命名映射.级联规则.是否启动缓存.执行器 ...

  5. eclipse中运行java程序

    1 package ttt; public class Testttt { public static void main() { Person p =new Person(); p.name=&qu ...

  6. hive-hbase性能问题

    华为负责人本来想用这种表来做大数据开发,先前就听前辈讲过性能存在问题.实际开发过程确实存在不少问题.然后放弃换方案去做了. 1.底层meta映射字段问题.默认4000,如果再做修改会涉及到挺多源码. ...

  7. svn: E170013: Unable to connect to a repository at URL svn: E230001: Server SSL certificate verification

    idea更新项目报E230001: Server SSL certificate verification failed: certificate issued for a different hos ...

  8. Django项目：CRM(客户关系管理系统)--30--22PerfectCRM实现King_admin数据添加

    登陆密码设置参考 http://www.cnblogs.com/ujq3/p/8553784.html # king_urls.py # ————————02PerfectCRM创建ADMIN页面—— ...

  9. CF 578B "Or" Game

    传送门 解题思路 题意大概是给你一个数列,可以进行k次操作,每次操作可以选择一个数乘x,问操作后的或的最大值.根据位运算,位数越高答案越优,所以贪心的使这k次操作全都放到一个数上,这样的结果肯定较优. ...

  10. ECMAScript 6 （浅显入门）

    1.let:ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为unde ...