如何根据屏幕尺寸/设备选择适当的CSS样式

Question

Bootstrap 3在响应式实用工具中有一些不错的CSS类，可以根据屏幕分辨率来隐藏或显示某些块 http://getbootstrap.com/css/#responsive-utilities-classes

我在一个CSS文件中有一些样式规则，我希望根据屏幕分辨率来应用或不应用这些规则。

我该如何做呢？

我将把所有的CSS文件都压缩到一个生产部署的文件中，但如果没有其他解决方案，只能为不同的屏幕分辨率使用单独的CSS文件。

Answer 1

检测是自动的。您必须指定每个屏幕分辨率可以使用的css：

/* 对于所有屏幕，使用14px字体大小 */
body {  
    font-size: 14px;    
}
/* 响应式，对于小屏幕，使用13px字体大小 */
@media (max-width: 479px) {
    body {
        font-size: 13px;
    }
}

Answer 2

使用 @media 查询。它们正好可以满足这个需求。以下是一个示例，说明它们的工作原理：

@media (max-width: 800px) {
  /* 在宽度等于或小于 800px 时显示的 CSS 代码放在这里 */
}

这只会在宽度等于或小于 800px 的设备上生效。

在 Mozilla 开发者网络上了解更多关于媒体查询的内容。