在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将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. 2022-05-13内部群每日三题-清辉PMP

    1.一个运营团队认为他们的技能在项目上是不必要的,团队士气低落,且团队成员试图阻止项目实现目标.项目经理应该怎么做? A.建议公司改变战略,并立即停止项目 B.要求工会的支持来激励团队 C.根据项目成 ...

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

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

  3. Python条件语句和基本数据类型

    1.if基本语句 if 条件: 内部代码块 else: ...... 2.if支持嵌套 if 1 == 1: if 2 == 2: print('走一步') else: print('走两步') el ...

  4. 修改docker0 中的inet

    由于在服务器使用默认的172开头的ip,可能会跟别人的产生冲突,则就需要重新配置ip 1.创建daemon.json vi /etc/docker/daemon.json (不能打空格:用tab缩进) ...

  5. Java集合-练习巩固

    练习一 public class H1_Test { public static void main(String[] args) { H1_News h1News = new H1_News(&qu ...

  6. 5. nginx跨域配置

    1.跨域问题处理:在nginx相关接口上配置如下: 如接口有自己的请求头,则加上:如接口自带请求头pubacc-buid if ($request_method = "OPTIONS&quo ...

  7. [菜鸡随笔-2]用mv代替rm安全地进行删除操作的小技巧

    牢骚和背景介绍: rm -rf /*的梗 相信大家都听过笑过,我不止听过笑过,还不小心试过(不要熬夜写东西!).为此丢了我一周的心血,和40块钱(买u盘跑网吧下载引导文件).所幸,这只是在自己的机器上 ...

  8. Markdowm的下载方法

    1打开百度搜索,输入TYPORA打开下载页面,根据自己的系统(我的是WINDOWS64位)点"DOWN"进行下载安装. 2安装好后回到桌面新建一个文件夹(Markdown学习),然 ...

  9. html表白代码

    1.在电脑桌面右击鼠标选择新建--文本文档 2.并命名为:biaobai.txt 3.打开并且把一下代码复制并粘贴到biaobai.txt <!DOCTYPE html PUBLIC " ...

  10. KingbaseES V8R3集群维护案例之---pcp_node_refresh应用

    案例说明: 在一次KingbaseES V8R3集群切换分析中,运维人员执行了pcp_node_refresh,导致集群发生了failover的切换.此文档对pcp_node_refresh工具做了应 ...