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

Question

Bootstrap 3提供了响应式实用程序的漂亮CSS类，可以根据屏幕分辨率隐藏或显示某些块 http://getbootstrap.com/css/#responsive-utilities-classes

我有一些在CSS文件中的样式规则，在屏幕分辨率基础上希望能够应用或不应用这些规则。

该怎么做呢？

在生产部署时，我将所有的CSS文件最小化到一个文件中，但如果没有其他解决方案，只能为不同的屏幕分辨率使用不同的CSS文件。

- Zelid

Answer 1

使用@media查询。它们正是为此目的而设计的。以下是一个示例，说明它们的工作方式：

@media (max-width: 800px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
}

此方法仅适用于宽度等于或小于 800px 的设备。

在Mozilla 开发者网络中了解更多有关媒体查询的内容。

- Ranveer

---

尽管media在HTML中用于根据media规则包含不同的CSS文件，感谢指出它也可以在CSS内部使用。 - Zelid

如果你打开bootstrap.css文件，它就是他们所做的。 - Ranveer

Answer 2

检测是自动的。您必须指定每个屏幕分辨率可以使用哪些CSS样式：

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

- C.P.O

Answer 3

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

- Sugam Parajuli

Answer 4

我创建了一个小的Javascript工具，可以在屏幕大小上样式化元素，而不需要使用媒体查询或重新编译Bootstrap CSS。

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

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

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

- Joep Geevers

Answer 5

为什么不使用@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
})

- Michael Koelewijn