使用@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上的媒体查询的信息。

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

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

我创建了一个小的javascript工具来根据屏幕大小设计元素的样式，而不需要使用媒体查询或重新编译 Bootstrap css：
https://github.com/Heras/Responsive-Breakpoints
只需将responsive-breakpoints类添加到任何元素，它就会自动将xs sm md lg xl类添加到这些元素。
演示：https://codepen.io/HerasHackwork/pen/rGGNEK

为什么不使用媒体查询，它也不太复杂。

@media only screen and (max-device-width:480px) {
enter code here

}

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