响应式网站设计（6）-媒体查询

媒体查询

调试工具

在PC端样式设置完毕之后，我们需要适配移动端。首先，我们选择的设备类型不是某一种设备，而是responsive。另外，我们可以打开标签和媒体查询，如下图：

代码位置

媒体查询的代码为止，并没有明确的规定。根据个人的习惯的不同，位置很灵活。但是，为了代码维护的方便性，我们建议，代码放置到对应外层容器标签css样式的最下方。

单位选择

在进行响应式网站设计的时候，媒体查询是必须使用的。但是在使用单位的时候，存在一些坑儿，我们必须注意。在样式设置的时候，我们选用的单位是rem，但是在使用媒体查询的时候，发现，设置好断点之后，将px转化为rem，我们预期效果与实际效果不一致。

那么，问题是出现在哪儿呢？经尝试发现，我们进行px→rem换算的时候，采用的是html的font-size作为基准的。而实际上，媒体查询的优先级是高于html标签的，是根据浏览器默认的font-size折算的（不是我们的1rem = 10px，而是1rem = 16px）。

另外，在媒体查询中使用rem会存在一定的bug，因此，我们建议使用兼容性更好的em来作为媒体查询的单位。

@media only screen and (max-width: 50em) {

}
@media only screen and (min-width: 30.0625em) and (max-width: 50em) {

}
@media only screen and (max-width: 30em) {

}

备注：上述媒体查询的断点为480px（30em），800px（50em）