回退/响应CSS样式

我刚刚升级了我的网站，加入了响应式风格，但当我上传更改时，回退原始/流体风格不起作用。它只使用最高的最小宽度响应样式。我做错了什么

我的网站是

HTML

CSS响应

@media screen and (min-width: 300px) {

        /* *********************************          Scrollstop Styles          ********************************* */

        .scroll img {
            visibility: hidden;
            }

        /* ************************************          Logo Styles          ************************************ */

        #logo-container {
            width: 70%;
            margin: 40% 15% 25% 15%;
            }

        #logo-container img {
            opacity: 1!important;
            }

        /* ************************************          Menu Styles          ************************************ */

        nav {
            height: 30px;
            padding-bottom: 1em;
            background-color: #696773;
            }

                nav a {
                    font-size: .75em;
                    }

                    nav ul li a:hover {
                        outline: initial;
                        font-size: 1em;
                        }

            #nav-bkg img {
            visibility: hidden;
            }

        /* ********************************          Main Content Styles          ******************************** */

        .subtitle {
            padding: 3%;
            font-size: 1.25em;
            }

        p {
            font-size: .85em;
            text-align: justify;
            }

        #services-section {
            width: 80%;
            margin: 5% 10%;
            padding: 0;
            }

            #services-section #fa-icon .icon {
                width: 50%;
                margin: 0 0 15% 0;
                padding: 0;
                font-size: .65em;
                color: #f26da5;
                float: left;
                }

                #services-section h5 {
                    margin: 0;
                    padding: 0;
                    font-size: 1em;
                    border-top: none;
                    }

        #specials {
            width: 80%;
            margin: 5% 10%;
            padding: 0;
            float: right;
            }

        #work-section {
            width: 100%;
            margin: 0;
            padding: 0;
            }

            #work-section .slider img {
                width: 96%;
                margin: 2%;
                padding: 0;
                }

        #contact-section {
            width: 90%;
            margin: 15% 0;
            padding: 5%;
            }

            #contact-section .subtitle {
                margin-bottom: 10%;
                }

            #contact-section p {
                width: 100%;
                margin: 0;
                padding: 0;
                text-align: left;
                }

                #contact-section p .type {
                    width: 100%;
                    margin: 0;
                    padding: 0;
                    }

            #contact-section .contact-wrap {
                width: 100%;
                margin: 0;
                padding: 0;
                float: left;
                }

                #contactform {
                    margin-top: 15%;
                    }

                #contact-section textarea {
                    width: 100%;
                    margin: 0;
                    padding: 0;
                    }

                #contact-section #message .button {
                    width: 50%;
                    margin: 0;
                    padding: 0;
                    }

                br {
                    display: none;
                    }
}










@media screen and (min-width: 500px) {

        /* ************************************          Logo Styles          ************************************ */

        #logo-container {
            margin: 45% 15%;
            }

        /* ********************************          Main Content Styles          ******************************** */

        .subtitle {
            font-size: 1.5em;
            }

        p {
            font-size: 1em;
            }

        #about-section {
            width: 70%;
            padding: 10% 15% 20% 15%;
            }

            #about-section p {
                padding-bottom: 20%;
                border-bottom: 1px solid #696773;
                }

        #services-section {
            margin: 5% 10% 25% 10%;
            padding: 10% 0 20% 0;
            border-bottom: 1px solid #ffffff;
            }

        #specials {
            margin: 5% 10% 25% 10%;
            }
}










@media screen and (min-width: 600px) {

        /* ************************************          Logo Styles          ************************************ */

        #logo-container {
            width: 50%;
            margin: 45% 25%;
            }

        /* ********************************          Main Content Styles          ******************************** */

        .subtitle {
            padding: 3%;
            font-size: 1.5em;
            }

        #services-section #fa-icon .icon {
            width: 50%;
            margin: 0 0 15% 0;
            padding: 0;
            font-size: .65em;
            color: #f26da5;
            float: left;
            }
}










@media screen and (min-width: 700px) {

        /* ************************************          Logo Styles          ************************************ */

        #logo-container {
            width: 40%;
            margin: 40% 30%;
            }

        /* ************************************          Menu Styles          ************************************ */

        nav a {
            font-size: 1em;
            }

            nav ul li a:hover {
                outline: 1px solid #ffffff;
                }

        /* ********************************          Main Content Styles          ******************************** */

        #services-section {
            margin: 5% 10% 25% 10%;
            padding: 10% 0 20% 0;
            border-bottom: 1px solid #ffffff;
            }

        #services-section {
            height: 400px;
            }

        #services-section #fa-icon .icon {
            width: 50%;
            margin: 0 0 15% 0;
            padding: 0;
            font-size: 1em;
            color: #f26da5;
            float: left;
            }

        #specials {
            height: 400px;
            padding: 0;
            float: right;
            }

        #work-section .slider img {
            width: 46%;
            margin: 2%;
            float: left;
            }
}










@media screen and (min-width: 900px) and (max-width: 999px) {

        /* *********************************          Scrollstop Styles          ********************************* */

        .scroll img {
            visibility: visible;
            }

        /* ************************************          Logo Styles          ************************************ */

        #logo-container {
            width: 30%;
            margin: 15% 35%;
            }

            #logo-container img {
                opacity: 1;
                }

        /* ************************************          Menu Styles          ************************************ */

        nav {
            background-color: initial;
            }

            nav a {
                font-size: 1em;
                }

                nav ul li a:hover {
                    outline: 1px solid #ffffff;
                    }

                #nav-bkg img {
                visibility: visible;
                }

        /* ********************************          Main Content Styles          ******************************** */

        #services-section {
            margin: 5% 10% 25% 10%;
            padding: 10% 0 20% 0;
            border-bottom: 1px solid #ffffff;
            }

        #services-section {
            width: 80%;
            margin: 5%;
            padding: 5%;
            height: 350px;
            border: none;
            }

        #services-section #fa-icon .icon {
            width: 25%;
            margin: 0 0 15% 0;
            padding: 0;
            font-size: 1em;
            color: #f26da5;
            float: left;
            }

        #specials {
            width: 80%;
            margin: 5%;
            padding: 5%;
            height: 350px;
            float: right;
            }

        #work-section {
            padding-bottom: 5%;
            }

            #work-section .slider img {
                width: 23%;
                margin: 1%;
                float: left;
                }

            #contact-section .subtitle {
                margin-bottom: 10%;
                }

            #contactform {
                margin-top: 5%;
                }
}

---

因为这两个部分都定义为最小宽度，所以当显示区域超过1000px时，将应用这两个部分，当显示区域超过300px时，仅应用最小宽度：300部分

由于应用了这两个部分，浏览器将采用标准css规则对相似样式进行优先级排序。看

如果希望更明确，可以指定：

@media screen and (min-width: 300px) and  (max-width: 999px)

在那之后，你的回应风格将停止应用

---------根据评论进行编辑：

如果我了解您要查找的内容，则需要能够嵌套@media查询，但不支持。 例如：

这样，您的响应风格将停止在999px，但他们将累积到这一点？ 我相信实现这一逻辑性写作的唯一方法是少用或少用SCS。这将编译你的css，并完全按照你试图避免的方式重写它。。。 我认为你能做的最好的事情是：

@media screen and (min-width:300px) and (max-width:999px)
{ }
@media screen and (min-width:600px) and (max-width:999px)
{ }
@media screen and (min-width:900px) and (max-width:999px)
{ }

---

或者最好尝试以下方式：

@import url(responsive.css) screen and (max-width: 999px);

在responsive.css中：

@media screen and (min-width:300px)
{ }
@media screen and (min-width:600px)
{ }
@media screen and (min-width:900px)
{ }

---

在我看到的另一个线程中建议了这一点：

我最初同时设置了最小宽度和最大宽度，但决定只设置最小宽度以减少文件大小。对于min和max，我必须在每个断点重写相同的样式，但仅使用min width，它们将继续。最后一个断点被设置为最小宽度：900px和最大宽度：999px，回退被设置为1000px，所以这应该是有效的，对吗？必须有更好的解决办法。

@media screen and (min-width:300px) and (max-width:999px)
{ }
@media screen and (min-width:600px) and (max-width:999px)
{ }
@media screen and (min-width:900px) and (max-width:999px)
{ }

@import url(responsive.css) screen and (max-width: 999px);

@media screen and (min-width:300px)
{ }
@media screen and (min-width:600px)
{ }
@media screen and (min-width:900px)
{ }