Question

这是我第一次使用css媒体查询。现在我正在寻找移动设备的媒体查询。我开始对240x320的手机进行媒体查询。因此，我已经开始我的媒体查询如下：

@media only screen and (max-width:240px){


}

从this链接，我会相信声明的逻辑应该成立。即当浏览器窗口等于或小于240px时，那里的css应该启动。出于某种原因，虽然这不会发生？这是我的完整CSS：

@media only screen and (max-width:240px){

            .inputbox
            {
                width: 64%;
                border: 1px solid black;
                border-bottom-right-radius: 2em;
                border-top-right-radius: 2em;
                /*box-shadow: inset 0px 2px 2px #ececec;*/
                display: inline;
                padding: 0.55%;
                font-size: 100%;
                margin-top: 0px;
                margin-bottom: 1%;
            }

            .labelbox
            {
                border: 1px solid black;
                border-bottom-left-radius:2em;
                border-top-left-radius: 2em;
                padding: 0.55%;;
                display: block;
                background: #e9f939; /* Old browsers */
                padding-right: 7px;
                color:black;
                float:left;
                width:30%;
                font-size: 100%;
                text-align: center;
            }

        }

        .inputbox
        {
            width: 80%;
            border: 1px solid black;
            border-bottom-right-radius: 2em;
            border-top-right-radius: 2em;
            /*box-shadow: inset 0px 2px 2px #ececec;*/
            display: inline;
            padding: 0.55%;
            font-size: 100%;
            margin-top: 0px;
            margin-bottom: 1%;
        }

        .labelbox
        {
            border: 1px solid black;
            border-bottom-left-radius:2em;
            border-top-left-radius: 2em;
            padding: 0.55%;;
            display: block;
            background: #e9f939; /* Old browsers */
            padding-right: 7px;
            color:black;
            float:left;
            width:17.5%;
            font-size: 100%;
            text-align: center;
        }

关于我正在打破的任何想法？

Answer 1

问题是您在媒体查询后定义了正常（非240px）样式，因此它们会覆盖查询中的样式。颠倒顺序，你会没事的。（媒体查询不会影响CSS特异性。）

Answer 2

问题：

如果没有通过媒体查询定义条件，那么任何css-tag都会获取它的样式的最后一个声明....所以当你定义了媒体查询时，它会运行但是因为在那个查询之后......定义了一种通用样式，该泛型样式会覆盖您的媒体查询样式。

解决方案：

将媒体查询交换到最后一个并将通用css置于其上： see demo here

  /* generic css first */
.inputbox {
    width: 80%;
    border: 1px solid red;
    border-bottom-right-radius: 2em;
    border-top-right-radius: 2em;
    /*box-shadow: inset 0px 2px 2px #ececec;*/
    display: inline;
    padding: 0.55%;
    font-size: 100%;
    margin-top: 0px;
    margin-bottom: 1%;
}
.labelbox {
    border: 1px solid black;
    border-bottom-left-radius:2em;
    border-top-left-radius: 2em;
    padding: 0.55%;
    ;
    display: block;
    background: #e9f939;
    /* Old browsers */
    padding-right: 7px;
    color:black;
    float:left;
    width:17.5%;
    font-size: 100%;
    text-align: center;
}

  /* media-query below the generic */
@media only screen and (max-width : 240px) {
    .inputbox {
        width: 64%;
        border: 1px solid black;
        border-bottom-right-radius: 2em;
        border-top-right-radius: 2em;
        /*box-shadow: inset 0px 2px 2px #ececec;*/
        display: inline;
        padding: 0.55%;
        font-size: 100%;
        margin-top: 0px;
        margin-bottom: 1%;
    }
    .labelbox {
        border: 1px solid black;
        border-bottom-left-radius:2em;
        border-top-left-radius: 2em;
        padding: 0.55%;
        ;
        display: block;
        background: #e9f939;
        /* Old browsers */
        padding-right: 7px;
        color:black;
        float:left;
        width:30%;
        font-size: 100%;
        text-align: center;
    }
}

@media查询未生效

2 个答案: