关于css中em和百分数的区别
CSS代码如下：
<style>
html{-webkit-text-size-adjust:none;}
html,body{height:100%;}
body{min-width:320px;font-size:62.5%;font-family:Arial,'Microsoft YaHei', Helvetica, sans-serif;background-color:#e9e9e9;}
@media screen and (max-width: 900px){
body{font-size:52%;}
}
@media screen and (max-width: 800px){
body{font-size:46%;}
}
@media screen and (max-width: 768px){
body{font-size:41%;}
}
@media screen and (max-width: 650px){
body{font-size:40%;}
}
@media screen and (max-width: 550px){
body{font-size:41%;}
}
@media screen and (max-width: 480px){
body{font-size:30%;}
}
@media screen and (max-width: 360px){
body{font-size:22%;}
}
@media screen and (max-width: 320px){
body{font-size:20.5%;}
}
.wrap{max-width:64em;width:100%;height:100%;}
.logo{max-width:44em;/*max-width:440px;*/width:68.75%;height:auto;overflow:hidden;margin:4em auto;background:#000;}
.logo img{width:100%;height:auto;display:block;}
</style>
HTML代码如下：
<div class="wrap box">
<div class="logo box"><img src="images/zt_sm01.png"/></div>
</div>
在使用em和百分数的过程中明显感觉em和比百分数的展示效果大一些，所以很不理解，到底该如何正确使用em和百分数，什么情况下改使用百分数什么情况下该使用em单位，求解，谢谢！ 展开
em是要依靠父元素的值来计算的
1、字体计算公式依旧
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
2、其它属性的计算公式需要换成
1 ÷ 元素的font-size × 需要转换的像素值 = em值
1、浏览器的默认字体大小是16px
2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
3、这一种千万要慢慢理解，不然很容易与第二点混了。如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
那么元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：
1 ÷ 元素自身的font-size × 需要转换的像素值 = em值
这样说，不知道大家理解了整明白了没有，如果没有整明白，可以回过头来看上面的一个实例。
推荐工具：
最简单的PX和EM转换工具pxtoem.com
你说的这个em和px的转换我理解，我现在就是不太明白，百分数和em之间的关系，因为我用百分数显示的效果明显比em实现的效果显得小，无论是整体的框架还是图片em作为单位值都是比较大的，所以我想搞清楚的是em和百分数的关系到底怎么回事，谢谢
两幅图你看了就明白了！
.sub1{
width: 150%;
height: 150%;
background-color: #2187E7;
}
继承的是父级的width和height！所以sub1的宽度和高度最后应该是150px;
em他是根据父级的：font-size属性值来定义的，当body的font-size：16px时
sub2的宽度高度其实就只有16px!
