如何根据屏幕大小/设备使用特定的CSS样式
如何根据屏幕大小/设备使用特定的CSS样式
提问于 2014-01-12 22:46:19
Bootstrap 3在响应式实用程序中有很好的CSS类，允许我根据屏幕分辨率http://getbootstrap.com/css/#responsive-utilities-classes隐藏或显示一些块。
我在CSS文件中有一些样式规则，希望根据屏幕分辨率应用或不应用。
我该怎么做呢？
我打算将我所有的CSS文件最小化到生产部署上的一个CSS文件中，但是如果除了为不同的屏幕分辨率使用单独的CSS文件之外没有其他解决方案，这种情况是可以避免的。
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-01-12 22:51:49
使用@media queries。他们就是为了这个目的。下面是一个它们是如何工作的例子：
@media (max-width: 800px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
}这只适用于宽度等于或小于800px的设备。
阅读有关Mozilla Developer Network上的媒体查询的更多信息。
Stack Overflow用户
发布于 2017-08-15 22:36:03
检测是自动的。您必须指定可用于每种屏幕分辨率的css：
/* for all screens, use 14px font size */
body {
font-size: 14px;
}
/* responsive, form small screens, use 13px font size */
@media (max-width: 479px) {
body {
font-size: 13px;
}
}Stack Overflow用户
发布于 2019-03-28 16:18:20
@media查询服务于此目的。下面是一个例子：
@media only screen and (max-width: 991px) and (min-width: 769px){
/* CSS that should be displayed if width is equal to or less than 991px and larger
than 768px goes here */
}
@media only screen and (max-width: 991px){
/* CSS that should be displayed if width is equal to or less than 991px goes here */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21075983
复制相关文章
相似问题