如何使用基于屏幕尺寸/设备的特定CSS样式

问题描述：

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 */
}

b $ b

这只适用于宽度等于或小于800像素的装置。

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

阅读更多有关媒体查询的资讯，请参阅 Mozzilla开发人员网络。

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

如何使用基于屏幕尺寸/设备的特定CSS样式

相关推荐