在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将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. React函数式组件值之useRef()和useImperativeHandle()

    一.useRef useRef共有两种用法,获取子组件的实例(只有类组件可用),在函数组件中的一个全局变量,不会因为重复 render 重复申明, 类似于类组件的 this.xxx. 1. useRe ...

  2. Curl 命令举例

    curl是一个强大的网络请求lib,虽然强大,但是参数太多哈,不得不吐槽,下面列举一下常用使用方法,供大家CV POST 请求 入门: curl -X POST "http://localh ...

  3. Java-Java调用mysqldump进行数据库备份

    1 public ResultData backupDatabase(Integer type) { 2 // 构建备份sql的文件名 3 String sqlFileName = "tes ...

  4. sudo:Operation not permitted事件

    转载请注明来源:https://www.cnblogs.com/Sherlock-L/p/14933949.html 前言 事情是这样的,在风和日丽的一天,我如往常一样在服务器上敲下了sudo xxx ...

  5. Laravel ORM 常用方法

    1. 数据查询 ->find($id);  //需要一个主键$id并返回一个模型对象.若不存在则返回null ->findOrFail($id);  //需要一个主键$id并返回一个模型对 ...

  6. 星链技术设计（starlink techriage design）

    1.星链  定义:  星链,是美国太空探索技术公司的一个项目,太空探索技术公司计划在2019年至2024年间在太空搭建由约1.2万颗卫星组成的"星链"网络提供互联网服务,其中158 ...

  7. vue+vant打包，vue+vant-ui小程序，微信支付

    微信JS支付代码_前端调用微信支付接口 其实参照官方文档一步一步操作不是很难,但很多人在签名这个地方就总是出现问题,因为文档中签名时使用的字段大小写时错误的....好坑啊!!然而PHP版本的代码官方有 ...

  8. iis发布后设置文件夹用户安全权限

    发布iis后异常截图: 401 - Unauthorized: Access is denied due to invalid credentials.You do not have permissi ...

  9. mysql压缩表小记

    参考文档: https://www.163.com/dy/article/GI4CH5N305319P76.html https://learn.lianglianglee.com/专栏/MySQL实 ...

  10. vue请求插件axios响应拦截302

    axios.interceptors.response.use(function (response) { return response;}, function (error) { // 对请求错误 ...