如何根据屏幕大小/设备使用特定的CSS样式

Question

Bootstrap 3在响应实用程序中具有不错的CSS类，使我可以根据屏幕分辨率隐藏或显示一些块

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

我该怎么做？

我打算将所有CSS文件最小化到生产部署中的一个，但是如果没有其他解决方案，而没有针对不同屏幕分辨率的单独CSS文件，则可以避免这种情况。

Answer 1

使用@media查询。他们服务于这个确切的目的。以下是它们如何工作的示例：

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

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

在Mozilla开发人员网络上阅读有关媒体查询的更多信息。