CSS3 Media Queries not working in Notepad++

问题

I am adding the below media query directly to a style sheet to my webpage:

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

background-color:red;

 }

So I am making the background colour change to red if the media type is screen and its maximum width is 480px. However Notepad++ is not picking up the media query as a CSS feature, it doesn't show in the colours as its supposed to.

Any suggestions?

回答1:

You want

@media screen and (max-width: 480px) {
    #content {
        background-color:red;
    }
}

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

see the first example, rules go inside of the media query

回答2:

your media screen don't have class or id.

you should Add class or id.

Ecxample:

@media screen and (max-width: 480px) {
    your class or id name{
        background-color:red;
    }
}

.............................................. .....................

class:

@media screen and (max-width: 480px) {
        .content{
            background-color:red;
        }
    }

..........

id:

 @media screen and (max-width: 480px) {
           #content{
                background-color:red;
            }
    }

来源：https://stackoverflow.com/questions/21686484/css3-media-queries-not-working-in-notepad