如何使用基于屏幕尺寸

如何使用基于屏幕尺寸

本文介绍了如何使用基于屏幕尺寸/设备的特定CSS样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

Bootstrap 3在响应式实用程序中有很好的CSS类,允许我根据屏幕分辨率隐藏或显示一些块

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.

推荐答案

使用。他们服务于这个确切的目的。以下是它们的工作原理示例:

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.

阅读更多有关媒体查询的资讯,请参阅。

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

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

09-02 21:10