css - 如何根据屏幕尺寸/设备使用特定的 CSS 样式

Question

Bootstrap 3 在响应实用程序中有很好的 CSS 类，允许我根据屏幕分辨率隐藏或显示一些 block http://getbootstrap.com/css/#responsive-utilities-classes

我想根据屏幕分辨率应用或不应用 CSS 文件中的一些样式规则。

我该怎么做？

我将把我所有的 CSS 文件最小化到生产部署的文件中，但如果除了为不同的屏幕分辨率使用单独的 CSS 文件之外没有其他解决方案，这种情况是可以避免的。

Answer 1

使用@media queries .他们服务于这个确切的目的。这是它们如何工作的示例:

@media (max-width: 800px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
}

这仅适用于宽度等于或小于 800 像素的设备。

在 Mozilla Developer Network 上阅读有关媒体查询的更多信息.