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

Comments
Write a Comment