如何更改小型设备中某个部分的高度

Question

我正在使用Bootstrap制作我的网站，我想在较小的设备上更改我的部分的高度，所以我将此代码添加到我的css文件中：

@media(max-width: 768px){
.services{
    height:2000px;
}
}
.services{
    height:1000px;
    background-blend-mode: darken;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../img/bg-2.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

但它无法正常工作，它再次显示小型设备的正常高度为1000px！那怎么做呢？

Answer 1

那是因为第二个声明（1000px）会覆盖第一个声明（2000px）。请参阅Chrome开发者工具附带的屏幕截图。

解决方案：只需切换声明的顺序（请参阅下面的代码段）。

＆＃13;

＆＃13;

.services{
    height:1000px;
    background-blend-mode: darken;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../img/bg-2.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (max-width: 768px){
.services{
    height:2000px;
}
}

＆＃13;

<div class="services">
Foo
</div>

＆＃13;

＆＃13;

＆＃13;