在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将px转换为em或者rem，下面就上述三者之间的联系进行讲解：

em与px转换
一般浏览器默认1em=16px，通过设置font-size大小来代表如：16px*0.625=10px，其则代表1em=10px，直接上代码(注释的样式为浏览器默认 （1em=16px）的长宽)：

<!DOCTYPE html>

<html lang="en" >

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

         body{font-size: 16px;}

        /*1em=10px*/

        /*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/

        #div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}

        /*#div2{width:200px;height:200px;margin:0 auto;}*/

        #div2{width:12.5em;height:12.5em;margin:0 auto;}

        /*#div3{width:480px;height:320px;margin:80px auto;}*/

        #div3{width:30em;height:20em;margin:5em auto;}

    </style>

</head>

<body>

<div id="div1" style="background:lightslategray;">

    <div id="div2" style="background: darkseagreen;"></div>

</div>

<div id="div3" style="background: deepskyblue;"></div>

</body>

</html>

在进行转换之前，我们一定要查看浏览器默认字体（最小）大小，如chrome浏览器，默认字体最小为12px，所以即使我们为了方便设置1em=10px，其浏览器仍旧以1em=12px计算。
16px*0.75=12px=1em

 body{font-size: 12px;}

 或者{font-size: 75%;}

em与rem区别
rem与px，和em与px转换是一样的，二者区别在于前者默认从根元素继承，后者从父级元素继承，还是上述代码，html我们不设置font-size，其默认为16px，上代码展示（div3单位我们修改为rem）：

<!DOCTYPE html>

<html lang="en" >

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{font-size: 12px;}

        /*1em=10px*/

        /*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/

        #div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}

        /*#div2{width:200px;height:200px;margin:0 auto;}*/

        #div2{width:12.5em;height:12.5em;margin:0 auto;}

        /*#div3{width:480px;height:320px;margin:80px auto;}*/

        #div3{width:30rem;height:20rem;margin:5rem auto;}

    </style>

</head>

<body>

<div id="div1" style="background:lightslategray;">

    <div id="div2" style="background: darkseagreen;"></div>

</div>

<div id="div3" style="background: deepskyblue;"></div>

</body>

</html>

从上述我们可以看到，div3单位设置rem后，其并没有根据body设置而变化，仍旧默认font-size：16px。所以为了方便，我们可以设置16px*1.25=20px，其代表1em为20px，同样有利于我们计算。

px、em、rem的区别css单位换算的更多相关文章

  1. px,em,rem的区别

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

  2. 搞清css的单位 px,em,rem的区别

    前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...

  3. /px/em/rem/的区别

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

  4. px,em,rem的区别与用法

    别人总结的.个人觉得特别的好: http://www.w3cplus.com/css/when-to-use-em-vs-rem.html

  5. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  6. 彻底弄懂css中单位px和em,rem的区别 转的自己看

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  7. 弄懂css中单位px和em,rem的区别

              国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...

  8. 【转载】彻底弄懂css中单位px和em,rem的区别

    原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...

  9. css中单位px和em,rem的区别[转载]

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

  10. [转]彻底弄懂css中单位px和em,rem的区别

    难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...

随机推荐

  1. Django 之 ModelForm

    一 Django的form组件 forms组件 二 Django的model form组件 这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,先来一个简单的 ...

  2. vue双向数据绑定原理简单实现

    vue双向数据绑定原理实现 准备工作 ​ 新建一个index.js文件, 一个index.html文件 ​ index.js文件中, 定义Vue类, 并将Vue并称全局变量 window.Vue = ...

  3. 【yum】使用新的centos 6.9系统时，遇到的Yum问题

    1,不识别域名 vi /etc/yum.conf 新增: nameserver 1.1.1.1(根据实际配置) 2,Header V3 RSA/SHA256 Signature, key ID 060 ...

  4. mysql 当年所有月份列表

    -- 不依赖任何表,只是用mysql自带函数方法select concat((select year(now())),'-01') as `date`union select concat((sele ...

  5. PaaS和SaaS的区别是什么？

    PaaS是Platform-as-a-Service的缩写,意思是"平台即服务" SaaS是Software-as-a-Service的缩写,意思是"软件即服务" ...

  6. 在SublimeText3中想使用快捷键调出插件ColorPicker不起作用办法解决

    在SublimeText3中快速打开插件ColorPicker的快捷健是Ctrl+Shift+C,但是我试了却不管用,后来发现是跟插件ConvertToUTF8插件中的快捷键冲突导致,知道原因就好办了 ...

  7. 关于Python 面向对象寻值的问题. How the number be found in the OOP in Python

    今天在看Python面向对象的时候看到了一个很有意思的问题 Today. When i learning the OOP in python , I found a very interesting ...

  8. JAVA笔记_方法递归调用

    方法递归调用   简单地说递归调用就是方法自己调用自己,每次调用时传入不同的变量,递归有助于编程者解决复杂问题,同时可以让代码变得更加简洁. 递归调用执行机制案例1: /** * @ClassName ...

  9. 使用NSIS打包软件

    平台和所需软件 平台: Windows 使用软件: NSIS https://nsis.sourceforge.io/Download HM NIS Edit https://sourceforge. ...

  10. 「SOL」Quick Tortoise (Codeforces)

    只能说没想到 题面 给出一个 \(n\times m\) 的网格图,每个格子要么是空地要么是障碍. 给出 \(q\) 个询问,每次给出 \((sx, sy),(ex,ey)\),问从 \((sx,sy ...