在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将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，同样有利于我们计算。
