媒体查询不起作用，并且在不应该的时候也会覆盖常规 css

Question

我在实施媒体查询时遇到了一些问题。我只是做了我需要的所有媒体查询。但现在看来，当我测试它时，我的正常视图（桌面也由于某种原因发生了变化）以及当我进入第一个媒体查询大小时。我可以看到一些元素，如 #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, 159, 157, 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;

    }
}

Answer 1

您可能过度使用了 !important 关键字。当您使用它时，它会声明任何其他规则都被覆盖了。由于当媒体查询设置为 min-width 或 min-height 时，较小的媒体查询是 at/executed 最先看到的内容，您可能会指示 css 说“我看到有较大的媒体查询，但较小的媒体查询指示我首先遵守其规则。

Answer 2

媒体查询中的 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>

Answer 3

1.

@media only screen and (min-height: 768px) and (min-width: 1024px) --- perhaps your window/browser height is Below 768px

2.

The ! IMPORTANT -flag often causes problems in code

3.

Your code in media-queries.scss should be nested in the same way regular.scss is nested too