为何media不起作用，不能更改css?

Question

我发现@media screen and (max-width:900px) and (min-width:500px){
}

这代码不起作用，为什么会这样？试了好久了，一直不变化，很奇怪！

谢谢

因为都回答代码没问题，我就放心的用火狐试了下，火狐可以，但chrome不行，为什么会这样？

我刚才直接加了个margin-left的标签，就能显示出变化
是否意味着，前一个div具备的标签，必须在后一个变化里全部再写一次？

Answer 1

刚才没看清楚，代码应该没问题

Answer 2

你这个代码没问题啊
谷歌兼容21以上你的谷歌多少

Answer 3

我在代码里加了一条：

 margin-left:300px;
 就开始显示变化了，
 这是不是意味着div 如果变化，就全部发生变化，少一个标签都不行？

Answer 4

media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

放个实例：

@media only screen and (min-width: 768px) {
    div.start-portrait {
        width: 100%;
        right: -90px;
    }
}

@media only screen and (min-height: 667px) {
    div.start-title {
        margin-top: 30px;
    }
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.99px) {
    div.carousel-h {
        --heightA: 768px;
        --heightB: calc(var(--heightA) / 3);
        height: var(--heightB);
    }
}

http://fzerotriluby.com/