Correct usage of media queries

Question

Can someone demonstrate the correct usage of media queries, please? I've got quite a lot of responsive code - i.e. a simplified version below. I would like the second media query to inherit the attributes of the the previous ones too, if that makes sense? i.e. p should have a font-size 30px and text-align center when in min-width 201px. At the moment I'm having to duplicate the code, which in this case is fine but with a big code-base it's pretty horrific and 99% redundancy. i.e.

media query 1 - p{font-color:blue;}
media query 2 - p{font-color:blue; font-size:5px;}
media query 3 - p{font-color:blue; font-size:5px; text-align center;}

I would like to have it so in media query 3 I can just do p{text-align: center;} with the rest inherited.

   @media query screen and (min-width:100px) and (max-width:200px)
    {
       p{font-size:30px;}
    }

  @media query screen and (min-width:201px) and (max-width:300px)
{
   p{text-align:center;}
}

Quentin · Accepted Answer · 2017-08-03 19:22:04Z

4

If you want rules from the earlier media queries to apply, then write them so they don't explicitly exclude the later ones.

i.e. remove the max-width rules.

answered Aug 3, 2017 at 19:22

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Over a year ago

Ah, had a blonde moment - cheers for the fast response! will upvote it in 13 minutes :)

Collectives™ on Stack Overflow

Correct usage of media queries

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related