在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将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. CVE-2023-25813 漏洞

    自己使用Nestjs 搭配 Sequelize ,在安装新包的时候提示有Critical 风险.有漏洞嘛,要第一时间处理,要处理,除了升级,还要看一下这个漏洞如何复现. 粗略得到结果如下: CVE-2 ...

  2. lucene入门&Solr

    LUCENE 1. 学习计划 1.案例分析:什么是全文检索,如何实现全文检索 2.Lucene实现全文检索的流程 a) 创建索引 b) 查询索引 3.配置开发环境 4.创建索引库 5.查询索引库 6. ...

  3. 判断python socket服务端有没有关闭的方法

    通过 getattr(socket, '_closed') 的返回值可以判断服务端的运行状态. True 是关闭状态,False 是运行中. import socket ip = 'localhost ...

  4. Excel怎么把公式转成数值并复制

    直接选中复制,粘贴时选择选择性粘贴,选择数值确认

  5. Docker CLI docker run 常用命令

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.Docker是内核 ...

  6. kubernetes：v1.25 + containerd

    由于kubernets从v1.24开始停止支持dockershim,kubernets不再支持通过docker来创建和管理容器.本文记录安装kubernetes v1.25 + containerd ...

  7. 使用FormData上传图片

    document.querySelector('.file').addEventListener('change', function(e) { //1.可以通过this拿到这个file的DOM元素 ...

  8. 给含有关键词的label着色

    给含有关键词的label着色 FineFileType() { let arr = document.querySelectorAll('.el-checkbox__label'); for (let ...

  9. 通过Container制作Image

    1.拉取tomcat镜像 docker pull tomcat docker images 2.根据tomcat镜像创建一个tomcat container docker run -d -it --n ...

  10. 在java路径上找不到javax.servlet.http.HttpServlet

    1.将写好的网页代码导入Java中会发现index.jsp文件开头部分出现报错 2.错误提示是找不到java路径问题 3.在项目中鼠标右键进行找到Build Path选项点击进去 4.找到Librar ...