本身不是搞前端的，但是遇到响应式开发，遇到em和rem，把自己经验分享出来
首先你要记住：浏览器默认字体大小是16px;
一、rem
首先你先在心里确定你设定的rem值的大小，如12px
html{font-size:百分比} 百分比=12px/16px=75%;
当你设置某元素大小时，
span{
font-size:1rem;(相当于设置为12px)
}
你可以根据页面宽高来设置html的font-size大小，当html的font-size大小改变时，rem的大小随之改变
二、em
首先你先在心里确定你设定的em值的大小，如12px
body{font-size:百分比} 百分比=12px/16px=75%;
当你设置某元素大小时，
span{
font-size:1em;(相当于设置为12px)
}
你可以根据页面宽高来设置body的font-size大小，当body的font-size大小改变时，em的大小随之改变
三、如何根据页面宽高设置html或body的font-size大小
html{font-size:100%} -> 可以看懂这是什么意思了吧，默认rem为16px;
完成后，你可以定义响应式字体：
@media screen and (min-width:300px) and (max-width:500px) {
@media screen and (min-width:640px) and (max-width:960px) {body{font-size:1rem;}}
@media screen and (min-width:960px) and (max-width:1200px) {body{font-size:1.2rem;}}
@media screen and (min-width:1200px) {body{font-size:1.5rem;}}
上面代码的意思是：
当宽度大于640px小于960px时，设置body的font-size为1rem即16px 则1em=16px;
大于960px小于1200px时， 1.2rem即19.2px 则1em=19.2px;
大于1200px时， · 1.5rem即24px 则1em=24px;
还有不懂得同学可以研究一下@media
注：google浏览器不支持12px以下的字体，可使用firefox进行测试
总结 ：当用rem时就操心html里font-size的大小，用em时就操心body里font-size的大小。