Do media queries inherit values that are not specified within a media query?

Question

I am using media queries and flex box to make my site responsive, I think I am being a bit dumb here but say i have the css class of wrapper, as follows:

 .wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    height: 80px;
    top: 0;
    z-index: 1;
    border-bottom: solid 1px #eee;
 }

What values does the media query of (max-width: 450px) inherit? or does it not inherit any?

@media only screen and (max-width: 450px) {
  .wrapper {
    height: 50px;
  }
}

Thanks

All values . Media querie doesn't mean replace at all the definition for the class is just cascade. Use the inspector — DaniP, Mar 15 '17 at 13:56
http://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css — DaniP, Mar 15 '17 at 14:14

score 5 · Accepted Answer · edited May 23 '17 at 11:54

Media Queries 'inherit' all the properties of the original element, and apply the specified changes in the actual media query.

Thus, your snippet effectively translates to:

.wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    height: 80px;
    top: 0;
    z-index: 1;
    border-bottom: solid 1px #eee;
 }

@media only screen and (max-width: 450px) {
  .wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    height: 80px;
    top: 0;
    z-index: 1;
    border-bottom: solid 1px #eee;

    /* And then your changes, which override earlier properties */
    height: 50px;
  }
}

This makes it possible to simply design an UI once, and modify that UI for various devices without having to copy paste the entire code into various Media Queries all the time, which would increase maintenance, size of the CSS and becoming more error-prone (i.e. you'll be forced to make edits in multiple places, you could forget and edit somewhere when making changes, and all sorts of nasty stuff).

To elaborate a little; overlapping media queries can also influence each other when they effect a certain element and compete. In which case the latter specified one would be the displayed one when the media query is put into effect. Disregarding !important tags, obviously. An more elaborate answer on this matter is discussed in this SO question.

The rules for these kind of situations are specified in the CSS Cascading and Inheritance rules, which are quite elaborately explained at Mozilla's Developer website.

Hope it helps!

Johannes · Answer 2 · 2017-03-15T14:17:45.547

1

CSS rules in media queries "inherit" all parameter values that are not overwritten by it from other rules that apply to the same selector which are above it in the stylesheet. So in your case everything with the exception of height

(Actually, they don't inherit that, but the regular parameter values simply continue to apply for all sizes and are not overwritten by a media query that doesn't contain that particular parameter)

edited Mar 15 '17 at 14:17

answered Mar 15 '17 at 14:07

Johannes

64,305
18
73
130

To be accurate the height too but is overwritten – DaniP Mar 15 '17 at 14:10
@DaniP well, that's maybe a bit philsophical, but I aready added something that also goes in that direction – Johannes Mar 15 '17 at 14:13

Do media queries inherit values that are not specified within a media query?

2 Answers2

Linked