Question

我正在尝试使用一组断点，并使用以下CSS代码来更改css规则，但规则仅适用于宽度超过1200px的屏幕，而不是其他。

/* Large Desktop Devices */
@media (min-width: 1200px) {
    .header {
        height: 120px;   
    }

}

/* Small Desktop Devices and iPad Landscape */
@media (min-width: 1024px) and (max-width: 1199px) {
    .header {
        height: 120px;   
    }

}

/* iPad and Tablets Potrait */
@media (min-width: 768px) and (max-width: 1023px)
    .header {
        height: 100px;   
    }

}

/* Large Screen Phones */
@media (min-width: 480px) and (max-width: 767px)
    .header {
        height: 90px;   
    }

}

/* Small Screen Phones */
@media (min-width: 320px) and (max-width: 479px)
    .header {
        height: 80px;   
    }

}

如果有人能看出为什么这不起作用，我很想知道！

由于

Answer 1

像这样使用 @media screen and (max-width:1200px) @media only screen and (max-width:1200px)

Answer 2

ensure you have added viewport metatag in your page

<meta name="viewport" content="width=device-width, initial-scale=1">

also You are missing opening braces on the last 3 statements 

/* Large Desktop Devices */
@media (min-width: 1200px) {
    .header {
        height: 120px;   
    }

}

/* Small Desktop Devices and iPad Landscape */
@media (min-width: 1024px) and (max-width: 1199px) {
    .header {
        height: 120px;   
    }

}

/* iPad and Tablets Potrait */
@media (min-width: 768px) and (max-width: 1023px){
    .header {
        height: 100px;   
    }

}

/* Large Screen Phones */
@media (min-width: 480px) and (max-width: 767px){
    .header {
        height: 90px;   
    }

}

/* Small Screen Phones */
@media (min-width: 320px) and (max-width: 479px)
    .header {
        height: 80px;   
    }

}

希望它有所帮助。

Answer 3

        /* Large Desktop Devices */
 @media screen and (min-width: 1200px){ 
        .header {
            height: 120px;   
        }

    }

    /* Small Desktop Devices and iPad Landscape */
@media screen and (min-width: 1024px) and (max-width: 1199px) { 
        .header {
            height: 120px;   
        }

    }

/* iPad and Tablets Potrait */
    @media screen and (min-width: 768px) and (max-width: 1023px) { 
        .header {
            height: 100px;   
        }

    }

    /* Large Screen Phones */
    @media screen and (min-width: 480px) and (max-width: 767px) { 
        .header {
            height: 90px;   
        }

    }

    /* Small Screen Phones */
    @media screen and (min-width: 320px) and (max-width: 479px) {
        .header {
            height: 80px;   
        }

    }

Answer 4

您需要将其更改为var number = $("#cal").val()*1024*1024*1024*1024;

CSS媒体查询 - 不工作

4 个答案: