我写了这段代码,但它不起作用
@media (max-width: 767px){
.navbar-brand {
padding-top: 10px;
height: 80px;
}
.navbar-brand h1{
padding-top: 10px;
font-size: 5vw;
}
.navbar-brand p {
font-size: .6em;
margin-top: 12px;
}
.navbar-brand p img {
height: 20px ;
}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span{
font-size: 1em;
}
}
我想在屏幕小于
767px时更改我的
navbar
,但根本不起作用。
使用最小宽度而不是最大宽度
@media (min-width: 767px) {
.navbar-brand {
padding-top: 10px;
height: 80px;
}
.navbar-brand h1{
padding-top: 10px;
font-size: 5vw;
}
.navbar-brand p {
font-size: .6em;
margin-top: 12px;
}
.navbar-brand p img {
height: 20px;
}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span{
font-size: 1em;
}
}
访问以下链接了解有关 css 中 min-widht 的更多信息: https://www.w3schools.com/cssref/playdemo.php?filename=playcss_min-width
在这种情况下,您可能应该使用 min-width 进行媒体查询。