如何使用基于屏幕尺寸/设备的特定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 */
}

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样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！