在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将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. docker 部署mongodb 并建立用户和授权数据库

    docker pull mongo:4.4.8 (拉取镜像) docker run --name mongo -v /data/mongo-data:/data/db -p 27018:27017 - ...

  2. 关于sqlsugar二级缓存

    二级缓存 1.优点 (1).维护方便:SqlSugar的 二级缓存 支持单表和多表的 CRUD 自动缓存更新 ,减少了复杂的缓存KEY维护操作 (2).使用方便:可以直接在Queryable.With ...

  3. linux 高并发系统限制 设置

    linux资源限制配置文件是/etc/security/limits.conf:限制用户进程的数量对于linux系统的稳定性非常重要. limits.conf文件限制着用户可以使用的最大文件数,最大线 ...

  4. 基于Geojson的点集的抽稀Js实现

    由于要进行反距离插值,离散点太多肯定会影响插值的效率. 为了提升插值速度,就有了这个点的抽稀. 参考这位仁兄的思路.http://blog.csdn.net/cdl2008sky/article/de ...

  5. 处理Android的物理后退按钮

    在文章.聊天.联系.相册四个页面时,用户点击Android 物理键返回,需要直接退出程序.我这里处理很简单,直接使用react-navigation的属性backbehavior就很快的解决了. &l ...

  6. BGP知识点总结（一）

    动态路由协议(工作范围)    1.自治系统内部的路由协议-IGP:工作在同一个AS内,主要用来发现和计算路由,为AS内提供路由信息的交换(ospf,rip,isis)    2.自治系统之间的路由协 ...

  7. HelloWorld (用记事本写，在dos窗口里运行)

    编写HelloWorld (用记事本写,在dos窗口里运行) 首先在任何一个盘中创建一个文件夹 在文件夹里新建一个HelloWorld.java文件,注意后缀名是.java(将文件拓展名打开) 打开这 ...

  8. Systrace学习记录

    「置顶」Android 性能优化必知必会[大量文章] https://androidperformance.com/2018/05/07/Android-performance-optimizatio ...

  9. MAVEN 本地jar包导入maven中

    mvn install:install-file -Dfile=D:\mvn\class12-10.2.0.3.0.jar  -DgroupId=com.Oracle.class -Dartifact ...

  10. 【NPDP专项练习】第六章 市场研究

    第六章 市场研究 1.VOC也叫客户心声,指的是. A 选择一个单一的投资组合项目,并保证所有项目都在策略内 B 利用迭代在专家组中形成共识的决策 C 通过人工"商店"引导潜在客户 ...