特定媒體查詢不起作用

Question

我已經設置了@screen-xs-max和@screen-sm-max樣式。 這些查詢都有效。 現在，我嘗試設置@screen-md-max的樣式，該樣式將不適用於某個div。 並非所有樣式-僅針對特定div。 當您檢查元素時，它們甚至根本不顯示？

HTML：

<div class="screenshot-projects bottom-border wrap" style="background-color:#fff;">
    <div class="container">
        <div class="row">
            <div class="col-md-7">
                <div class="projects-img">
                    <img src="~/Images/img-lgipad.png" />
                </div>
            </div>
</div>

減：

@media (max-width:@screen-md-max) {

    .screenshot-projects {

        projects-img {
            max-width: 300px!important;
        }
    }
}

唯一不適用的樣式是圖像大小-而是占據整個屏幕，並且僅在我將大小調整為中后才發生。 在xs和s處max:100%; 它適用。

Answer 1

你忘了點

@media (max-width:@screen-md-max) {

    .screenshot-projects {

        .projects-img {
            max-width: 300px!important;
        }
    }
}