如何根据屏幕尺寸/设备使用特定的 CSS 样式 [英] How to use particular CSS styles based on screen size / device

问题描述

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

Bootstrap 3 has nice CSS classes in responsive utilities that allow me to hide or show some blocks depending upon the screen resolution http://getbootstrap.com/css/#responsive-utilities-classes

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

I have some style rules in a CSS file that I want to be applied or not based on screen resolution.

我该怎么做?

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

I'm going to minimize all my CSS files into the one on production deployment, but this could be avoided if there are no other solutions than having separate CSS files for different screen resolutions.

推荐答案

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

Use @media queries. They serve this exact purpose. Here's an example how they work:

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

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

This would work only on devices whose width is equal to or less than 800px.

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

Read up more about media queries on the Mozilla Developer Network.

这篇关于如何根据屏幕尺寸/设备使用特定的 CSS 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！