Media Query断点单位

之前做一个项目，用的pure css里的grids来做的栅格和响应式布局，css里处理断点的是使用的em单位，因为刚好和设计师那边给的断点位置不一样就直接改了并顺手写的px单位。最近又有类似的项目突然想到这个单位的问题，就稍微测试一下下，看看不一样的单位有什么区别。
IE看的ie9，因为虚拟机里只有这个..看之后能不能补一下

默认情况

三个div，在断点处更改背景色。

@media screen and (min-width: 50rem) {
  .box1 { background: lightblue;}
}
@media screen and (min-width: 50em) {
  .box2 { background: lightblue;}
}
@media screen and (min-width: 800px) {
  .box3 {background: lightblue;}
}

小于800像素时

在800像素处背景变为蓝色

改html的字体大小

html {
    font-size: 20px;
}

Safarirem会受到字体大小的影响，em和px表现一致

IE Chrome Firefox表现一致都是在800px处变化

浏览器缩放

Safari

其他几个浏览器三个单位表现一致都是800px。

更改设置中的字体大小

rem和em表现一致，em和rem会受到设置的字体大小影响，而像素单位保持变化在设置的800px处。

情况2中pass掉rem；
用户改变字体大小设置的时候，em的表现会和用户缩放浏览器的结果展示的较为一致，考虑在断点处设置布局变化的情况，使用em单位时字体变大展示的空间也会变大，效果上也会好一些；
但是safari在缩放窗口大小时候em显得比较迟钝，看着像个bug...如果不考虑这一点的话使用em也还是比较不错的。

扩展&参考：
PX, EM or REM Media Queries?
Don't Use Em for Media Queries