我正在使用带有 jquery UI 的 bootstrap 3 来为用户搜索和选择字段。 css 代码在大屏幕上工作正常，但绝对不能在小屏幕上工作。我正在使用以下媒体查询代码，但它没有生效。事实上，我观察到我的自定义 css 代码不适用于任何 @media 查询。我在整个网站上使用 bootstrap3。有什么想法吗？
@media only screen and (max-width: 500px) {
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;
text-decoration: none;
}
.ui-state-hover, .ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
}
}
最佳答案
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background:red;
}
@media only screen and (max-width: 500px) {
body{
background:green;
}
}
</style>
</head>
<body>
</body>
</html>
关于jquery - 自定义 css 媒体查询不适用于 bootstrap3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43129424/