媒体查询不起作用，并且在不应该的情况下覆盖常规CSS

编程问答 2022-08-15

问题描述

我在实施媒体查询时遇到了一些问题。我刚刚进行了所有需要的媒体查询。但是现在看来，当我对其进行测试时，我的常规视图（由于某些原因桌面也发生了变化）以及我使用的第一个媒体查询大小。我可以看到，媒体查询未采用诸如#tagline和#login-form之类的某些元素，但是从较小尺寸的媒体查询中，正常视图也是如此。他们都采用了@media only screen and (min-height: 768px) and (min-width: 1024px)大小的更改，而不是我为此指定的内容。我不明白这里出了什么问题

常规scss：

#login-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;


    #side {
        width: 30%;
        background-color: $plain-white;
        display: flex;
        flex-direction: column;
        padding: 20px;
        border-right: 1px solid #ECECEC;


        #side-caption {
            width: 80%;
            margin: 100px auto;

            #appoint-full-logo {
                width: 80%;
            }

            #tagline {
                margin-top: -30px;
                color: rgba(2,159,157,1);
                font-weight: 500;
                font-size: 1.73em;

            }
        }
    }

    #login {
        width: 70%;
        height: 100%;
        background-color: rgba(2,1);


        #login-form {
            height:80% ;
            width:80% ;
            background-color: $plain-white;
            margin: 130px auto;
            border-radius: 5px;
            display: flex;
            flex-direction: column;

            div {
                height: 20%;

                #welcome {
                    text-align: center;
                    font-weight: 550;
                    font-size: 2.5em;
                    margin-top: 50px !important;
                    color: #E8A87C;
                }

            }

            #apply-text {
                height: 15%;
                font-size: 0.9em;
                width: 70%;
                margin: auto;
                font-weight: 500;
                // text-align: center;

            }

            #apply-form-fields,#login-form-fields {
                height: 45%;
                display: flex;
                flex-direction: column;
                margin-left: 16%;

                :first-child {
                    margin-top: 10px;
                }

                .form-group {
                    margin: 10px 0px;
                    width: 80%;

                    label {
                        font-weight: 500;
                    }
                }
            }

            #apply-submited {
                height: 10%;
                width: 70%;
                margin: auto;

                p {
                    background-color: rgba(85,255,214,0.50);
                    padding: 10px;
                    text-align: center;
                    font-weight: 600;
                    border-radius: 5px;
                    ;
                }
            }

            .button-field {
                height: 20%;


                .button {
                    cursor: pointer;
                    width: 70%;
                    height: 40%;
                    color: $white;
                    font-size: 1.1em;
                    margin: 10px auto;
                    background-color: #E8A87C;
                    border: none;
                    padding: 10px;
                    font-weight: 600;
                    border: solid 5px #E8A87C;
                    border-radius: 5px;
                    text-align: center;

                    &:hover {
                        color: #E27D60;
                    }
                }


                .change-form {
                    cursor: pointer;
                    text-align: center;

                    span {
                        font-weight: 600;

                    }

                    &:hover span {
                        color: #E8A87C;
                    }
                }

            }
        }

    }


}

媒体查询位于作弊风格的底部 设置媒体查询：

@media only screen and (min-width: 1366px) and (min-height: 1024px) {

    #tagline {
        margin-top: -17px !important;
        font-size: 1.52em !important;
    }


}

@media only screen and (min-width: 1024px)and (min-height: 1366px) {
    #tagline {
        margin-top: -17px !important;
        font-size: 1.05em !important;
    }

    #appoint-full-logo {
        width: 100% !important;
    }
}

@media only screen and (min-width: 1024px)and (min-height: 768px) {
    #tagline {
        margin-top: -15px !important;
        font-size: 1.05em !important;
    }

    #appoint-full-logo {
        width: 100% !important;
    }

    #login-form {
        width: 60% !important;
        height: 80% !important;
        margin-top: 110px !important;

    }

    #welcome {
        font-size: 2em !important;

    }
}

@media only screen and (min-width: 768px)and (min-height:1024px) {
    #tagline {
        margin-top: -10px !important;
        font-size: 0.76em !important;
    }

    #appoint-full-logo {
        width: 105% !important;
    }

    #login-form {
        width: 80% !important;
        height: 60% !important;
        margin-top: 110px !important;

    }

    #welcome {
        font-size: 1.9em !important;

    }
}

解决方法

您可能会过度使用！important关键字。当您使用它时，它指出其他任何规则都将被覆盖。由于较小的媒体查询是在将媒体查询设置为min-width或min-height时首先查看/执行的内容，因此您可能会指示CSS说“我看到有较大的媒体查询，但已指示我通过较小的媒体查询来首先并遵循大多数规则。

,

媒体查询中的CSS必须像常规样式规则中一样完全嵌套。

否则，他们将获得更多的重视。

您可以签出Codepen。

#container {
  #color {
    height: 50vh;
    background-color: red;
  }
}

#container2 {
  #color2 {
    height: 50vh;
    background-color: blue;
  }
}

@media (min-width: 768px) {
  /* not affected by querie */
  #color {
    height: 50vh;
    background-color: blue;
  }
  /* affected by querie */
  #container2 {
    #color2 {
      background-color: green;
    }
  }
}
<div id="container">
  <div id="color"></div>
</div>
<div id="container2">
  <div id="color2"></div>
</div>

,

1。

@media only screen and (min-height: 768px) and (min-width: 1024px) ---也许您的窗口/浏览器高度低于768px

2。

! IMPORTANT-标志通常会导致代码出现问题

3。

您的code in media-queries.scss应该以相同的方式嵌套 regular.scss也被嵌套

htmlmedia-queriesresponsive-designsasssass