<p>Bootstrap 3在响应式实用工具中有一些不错的CSS类，可以根据屏幕分辨率来隐藏或显示某些块 <a href="http://getbootstrap.com/css/#responsive-utilities-classes">http://getbootstrap.com/css/#responsive-utilities-classes</a></p>
<p>我在一个CSS文件中有一些样式规则，我希望根据屏幕分辨率来应用或不应用这些规则。</p>
<p>我该如何做呢？</p>
<p>我将把所有的CSS文件都压缩到一个生产部署的文件中，但如果没有其他解决方案，只能为不同的屏幕分辨率使用单独的CSS文件。</p>
2
961
收藏
检测是自动的。您必须指定每个屏幕分辨率可以使用的css：
/* 对于所有屏幕，使用14px字体大小 */ body { font-size: 14px; } /* 响应式，对于小屏幕，使用13px字体大小 */ @media (max-width: 479px) { body { font-size: 13px; } }使用
@media查询。它们正好可以满足这个需求。以下是一个示例，说明它们的工作原理：@media (max-width: 800px) { /* 在宽度等于或小于 800px 时显示的 CSS 代码放在这里 */ }这只会在宽度等于或小于 800px 的设备上生效。
在 Mozilla 开发者网络上了解更多关于媒体查询的内容。