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. JZOJ2368 【SDOI2011】黑白棋

    题目 题目大意 在一个1*n的棋盘上,有黑棋和白棋交错分布,每次,一个人可以移动自己的ddd颗旗子. 问先手必胜的方案数. 思考历程 在一开始,我就有点要放弃的念头. 因为这题是一道博弈问题. 我是非 ...

  2. Python快速搭建HTTP服务器

        <wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style=&q ...

  3. Python3.5 安装 & hello world

    1.下载安装python https://www.python.org/downloads/release/python-364/ 2.安装成功运行 python shell 3.或者cmd => ...

  4. 查找IE中网页的源代码

    一般我们在查看网页的源代码时,在网页上右键就能点击“查看源代码”.但是有些网页的右键功能被屏蔽了.这时候我们可以在ie菜单栏的“查看”选项里“源”查找. 如果发现ie菜单没在的话,点击键盘上的“Alt ...

  5. html css javascript mysql php学习总结

    一. html:超文本标记语言,运行在浏览器上,由浏览器解析 1.格式 <!doctype html> 声明文档类型,说明html版本号 <html> 说明代码格式 <h ...

  6. js数组快速排序/去重

    数组的排序  快速排序 思路: (1)在数据集之中,选择一个元素作为”基准”(pivot). (2)所有小于”基准”的元素,都移到”基准”的左边:所有大于”基准”的元素,都移到”基准”的右边. (3) ...

  7. tensorflow/model下的各个参数的理解

    首先,这个对应的proto就是 然后config里面的image_resizer等等 就是proto里面的image_resizer 等等,对应的参数可以在proto里面寻找解释和默认值以及类型 再比 ...

  8. c++使用优先队列时自定义优先出队顺序（和sort）

    优先队列也是一种先进先出的数据结构,元素从队尾入队,从队头出队,但是优先队列相较一般队列多了一个判断优先级的功能,在当前队列中,优先级最高的元素将被第一个删除. 先看一下优先队列的定义 templat ...

  9. Apache Flink 1.9重磅发布！首次合并阿里内部版本Blink重要功能

    8月22日,Apache Flink 1.9.0 版本正式发布,这也是阿里内部版本 Blink 合并入 Flink 后的首次版本发布.此次版本更新带来的重大功能包括批处理作业的批式恢复,以及 Tabl ...

  10. meta标签中设置apple-itunes-app的意义

    告诉iphone的safari浏览器:这个网站对应的是哪个app <meta name="apple-itunes-app" content="app-id=589 ...