rem与px的转换

引用自http://caibaojian.com/rem-and-px.html

A-A+

前端博客•前端开发教程•rem•3702View0

rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。

我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：

|  px  |     rem       |

------------------------

|  12  | 12/16 = .75   |

|  14  | 14/16 = .875  |

|  16  | 16/16 = 1     |

|  18  | 18/16 = 1.125 |

|  20  | 20/16 = 1.25  |

|  24  | 24/16 = 1.5   |

|  30  | 30/16 = 1.875 |

|  36  | 36/16 = 2.25  |

|  42  | 42/16 = 2.625 |

|  48  | 48/16 = 3     |

-------------------------

为了方便计算，时常将在<html>元素中设置font-size值为62.5%:

相当于在<html>中设置font-size为10px，此时，上面示例中所示的值将会改变：

|  px  |     rem        |

-------------------------

|  12  | 12/10 = 1.2    |

|  14  | 14/10 = 1.4    |

|  16  | 16/10 = 1.6    |

|  18  | 18/10 = 1.8    |

|  20  | 20/10 = 2.0    |

|  24  | 24/10 = 2.4    |

|  30  | 30/10 = 3.0    |

|  36  | 36/10 = 3.6    |

|  42  | 42/10 = 4.2    |

|  48  | 48/10 = 4.8    |

-------------------------

由于rem是css3中的一个属性，很多人首先关注的就是浏览器对他的支持度，我截了一张caniuse对rem属性的兼容表：

从上图可以清楚的知道，rem在众多浏览器中都已得到很好的支持，如果您的项目不用考虑IE低版本的话，你就可以放心的使用了。

rem与px的转换的更多相关文章

  1. Rem与Px的转换[转载]

    原文:http://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html rem是CSS3中新增加的一个单位 ...

  2. 转: rem与px的转换

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

  3. Sass基础——Rem与Px的转换

    rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一 ...

  4. 移动端适配方案以及rem和px之间的转换

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  5. 自动把网页px单位转换成rem

    自动把网页px单位转换成rem 首先在你的项目开发环境中安装2个插件 然后在vue.config.js文件引入并重新启动服务器 这样就配置成功了,一起看看效果

  6. vue换算单位px自动转换rem

    cnpm i postcss-px2rem --save cnpm install px2rem-loader --save 2.配置px2rem build目录下vue-loader.conf.js ...

  7. EM vs REM vs PX，为什么你不应该”只用px“”

    Actually this artical is from other person's opnion ,i just put it into chinese,and this means a ver ...

  8. 使用em和rem替代px

    rem是指根元素的字体大小,默认情况下html的字体大小为:16px=1rem.而em是相对单位,是基于它的祖先元素计算的. 如果我们不指定html和body的字体大小,要得到12px的rem需要这样 ...

  9. android 手机屏幕有关的几个工具(屏幕宽高,dp和px互相转换)

    平时适配页面时经常会需要根据屏幕的宽高来设置控件的大小,很多时候在代码中还会需要dp和px互相转换. 今天把最常用的几个记录一下,经测试包括2.3 ~ 5.0之间的版本都可用,其他版本未测,不过应该也 ...

随机推荐

  1. nodejs复习01

    console 格式化 console.log("%s:%s", "a", "b") //字符串 console.log("%d. ...

  2. LeetCode 136. Single Number

    最原始的方法:先排序,然后从头查找.若nums[i] = nums[i] + 1则为一对相同的数,i = i  + 2,继续判断.若nums[i] != nums[i] + 1,则输出nums[i]. ...

  3. [R语言]R语言计算unix timestamp的坑

    R+mongo的组合真是各种坑等着踩 由于mongo中的时间戳普遍使用的是unix timestamp的格式,因此需要对每天的数据进行计算的时候,很容易就想到对timestamp + gap对方式来实 ...

  4. webpack 使用教程--实时刷新测试

    学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器 可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关 ...

  5. 用wget命令下载jdk

    Oracle官网上下载jdk,需要点击accept licence的才能下载,使用下面的命令,直接可以下载.wget --no-check-certificate --no-cookies --hea ...

  6. Windows中断那些事儿

    搞内核研究的经常对中断这个概念肯定不陌生,经常我们会接触很多与中断相关的术语,按照软件和硬件进行分类: 硬件CPU相关: IRQ.IDT.cli&sti 软件操作系统相关: APC.DPC.I ...

  7. java中内存分配策略及堆和栈的比较

    Java把内存分成两种,一种叫做栈内存,一种叫做堆内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空间 ...

  8. OpenSSL 1.0.2e 3 Dec 2015

    目录: 1,交叉编译openssl 2,win32  vc9 编译 openssl 1,交叉编译openssl [原]交叉编译openssl不修改Makefile的方法 http://blog.chi ...

  9. 【PostgreSQL】PostgreSQL的安装

    到了新公司,新公司的数据库是使用PostgreSQL,第一次学习,第一次安装. 开始安装:

  10. python中__init__问题

    python中安装目录中的Lib文件夹模块中的__init__.py文件(文件内容可以为空),用于标识此文件夹是一个模块 python编程中的__init__表示初始化