Question

Bootstrap 3在响应式工具中有很好的CSS类，允许我隐藏或显示一些块，具体取决于屏幕分辨率http://getbootstrap.com/css/#responsive-utilities-classes

我在CSS文件中有一些样式规则，我想根据屏幕分辨率应用或不应用。

我该怎么做？

我要将所有CSS文件最小化到生产部署中的文件，但如果没有其他解决方案而不是为不同的屏幕分辨率使用单独的CSS文件，则可以避免这种情况。

Answer 1

使用@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上了解有关媒体查询的更多信息。

Answer 2

检测是自动的。您必须指定每个屏幕分辨率可以使用的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;
    }
}

Answer 3

我创建了一个小的javascript工具来设置屏幕大小的元素，而不使用媒体查询或重新编译bootstrap css：

https://github.com/Heras/Responsive-Breakpoints

只需将类responsive-breakpoints添加到任何元素，它就会自动将xs sm md lg xl类添加到这些元素中。

演示：https://codepen.io/HerasHackwork/pen/rGGNEK

Answer 4

为什么不使用 @ media-queries ？这些是为了这个目的而设计的。您也可以使用jQuery执行此操作，但这是我书中的最后手段。

var s = document.createElement("script");

//Check if viewport is smaller than 768 pixels
if(window.innerWidth < 768) {
    s.type = "text/javascript";
    s.src = "http://www.example.com/public/assets/css1";
}else { //Else we have a larger screen
    s.type = "text/javascript";
    s.src = "http://www.example.com/public/assets/css2";
}

$(function(){
    $("head").append(s); //Inject stylesheet
})

Answer 5

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

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

5 个答案: