Question

我使用此代码在scss中无法进行媒体查询

.navb-header{
    .navbar-brand{
        img{
            width:125px;
            @media only screen and (max-width: 767px) {
                width: 345px;
            }
        }
    }
    #navbarTogglerDemo02{
        ul{
            li.nav-item{
                padding: 0 10px;
                a{
                    font-weight: 500;
                    color: #000;
                    font-size: 16px;
                    text-transform: uppercase;
                    transition: all 500ms ease-in-out;
                    position: relative;
                    &:before{
                        content:'';
                        position: absolute;
                        width: 100%;
                        height: 2px;
                        border:1px solid #333;
                        bottom:0;
                        left: 0;
                        opacity: 0;
                        visibility: hidden;
                        transition: all 500ms ease-in-out;
                    }
                    &:hover:before{
                        opacity: 1;
                        visibility: visible;
                    }
                }
            }
        }
    }
}

Answer 1

您可以使用此代码段，因为您的Scss没有很好的优化和结构化，所以我为您完成了此操作。自己实施更改，以使用css和scss plese上的媒体查询更多地使用，请参考This link

.navb-header{
    .navbar-brand{
        img{width:125px;}
    }
    #navbarTogglerDemo02{
        ul{
            li.nav-item{
                padding: 0 10px;
                a{
                    font-weight: 500;
                    color: #000;
                    font-size: 16px;
                    text-transform: uppercase;
                    transition: all 500ms ease-in-out;
                    position: relative;
                    &:before{
                        content:'';
                        position: absolute;
                        width: 100%;
                        height: 2px;
                        border:1px solid #333;
                        bottom:0;
                        left: 0;
                        opacity: 0;
                        visibility: hidden;
                        transition: all 500ms ease-in-out;
                    }
                    &:hover:before{
                        opacity: 1;
                        visibility: visible;
                    }
                }
            }
        }
    }
    @media only screen and (max-width: 767px) {
        .navbar-brand{
            img{width:345px;}
        }   
    }
}

Answer 2

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

在顶部使用此链接，以便您可以使用媒体查询

我将此代码用于scss中的媒体查询不起作用

2 个答案: