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处变化
浏览器缩放
其他几个浏览器三个单位表现一致都是800px。
更改设置中的字体大小
rem和em表现一致，em和rem会受到设置的字体大小影响，而像素单位保持变化在设置的800px处。
情况2中pass掉rem；
用户改变字体大小设置的时候，em的表现会和用户缩放浏览器的结果展示的较为一致，考虑在断点处设置布局变化的情况，使用em单位时字体变大展示的空间也会变大，效果上也会好一些；
但是safari在缩放窗口大小时候em显得比较迟钝，看着像个bug...如果不考虑这一点的话使用em也还是比较不错的。
扩展&参考：
Comments