在我的 CSS 样式表中使用以下代码来定位我的超大屏幕:
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.jumbotron {
padding-top: 500px !important;
padding-bottom: 350px !important;
margin-bottom: 0;
background: url(../images/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
目的只是增加我的超大屏幕在移动显示器中的顶部和底部填充。但是这段代码根本不影响我的超大屏幕。我究竟做错了什么?
我试过只使用 min-width
和 max-width
,此外还像代码中那样将两者与 和
一起使用多于。这三个都没有导致任何变化。
最佳答案
@screen-sm-min
和 @screen-sm-max
是较少的变量。
因此,如果您想在 CSS 中使用它们,则必须指定实际值:
@media (min-width: 768px) and (max-width: 991px) {
但是如果你只想在移动设备上应用一个css样式,正确的媒体查询应该是:
@media (max-width: 767px) {
关于css - Bootstrap 媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40214314/