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低版本的话，你就可以放心的使用了。·

1rem等于多少px呢？

1rem等于html根元素设定的font-size的px值，假如我们在css里面设定下面的css。

html{font-size:14px}

那么后面的CSS里面的rem值则是以这个14来换算，例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:42px.height:35px，同理，假如一个设计稿为宽度42px,高度为35px，则换成成rem，则是42/14=3rem，35/14=2.5rem。·

如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

原文链接：http://caibaojian.com/rem-and-px.html

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

  1. rem与px的转换

    rem与px的转换 引用自http://caibaojian.com/rem-and-px.html A-A+ 前端博客•前端开发教程•rem•3702View0 rem是相对于根元素<html ...

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

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

  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. iOS Runtime 实操练习

    iOS  Runtime 知识详解: http://yulingtianxia.com/blog/2014/11/05/objective-c-runtime/ 一般可以运行Runtime进行以下操作 ...

  2. pytorch中，不同的kernel对不同的feature map进行卷积之后输出某一个channel对应的多个feature map如何得到一个channel的feature map

    实际上在卷积操作的时候,比如说,我某一层输出的feature map的size为4713*13 channel的数目为7,设经过某卷积层之后,网络输出的feature map的channel的数目为1 ...

  3. Visual Studio AI环境记录（Windows10）

    一.环境 Windows [版本 10.0.15063]64位 Git-2.14.1 64位[官网下载] TortoiseGit-2.5.0.0 64位[官网下载],这是一个Git 客户端,外号&qu ...

  4. 《DSP using MATLAB》Problem 7.6

    代码: 子函数ampl_res function [Hr,w,P,L] = ampl_res(h); % % function [Hr,w,P,L] = Ampl_res(h) % Computes ...

  5. Visual Studio安装SVN插件

    VS的SVN插件 材料 VS安装程序. VisualSVN安装程序,点击下载.  VisualSVN-5.0.1 前期准备 在代码管理的服务器上安装SVN server,可参考svn安装部署以及服务器 ...

  6. VS2017 对com组件调用返回错误hresult e_fail

    解决步骤如下: 第一步: 第二步:进入VS2017 安装目录,如下(路径仅供参考) 执行:gacutil -i Microsoft.VisualStudio.Shell.Interop.11.0.dl ...

  7. DotNetBar中Supergrid显示树形数据

    1.向窗体中拖一个Supergrid控件 2.添加列ID,NAME,MATH,CN,SEX 3.在任务窗格中勾选“Show Tree Lines”和“Show Tree Buttons” 4.添加数据 ...

  8. 黄聪：微信URL Scheme，URL唤起微信

    微信URL Scheme 在外部浏览器中,可以通过<a href="weixin://">打开微信APP 也可以通过加一些参数,打开微信APP里的指定页面 <a ...

  9. verilog 除法器

    verilog 除法器:利用二进制的除法翻译过来的硬件电路 1.1 实现算法 基于减法的除法器的算法: 对于32的无符号除法,被除数a除以除数b,他们的商和余数一定不会超过32位.首先将a转换成高32 ...

  10. 在WINDOWS下安装MYSQL8.0

    1:创建文件夹D:\data\service\mysql-8.0.11-winx64\data 2:进到D:\data\service\mysql-8.0.11-winx64\bin 第三步:初始化. ...