CODEWITHSUNDEEP
cssinheritancemedia-queries
Paul Stephen Davis
Paul Stephen Davis

Reputation: 153

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

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

Upvotes: 5

Views: 4262

Answers (2)

Extricate
Extricate

Reputation: 811

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!

Upvotes: 5

Johannes
Johannes

Reputation: 67778

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)

Upvotes: 1

Related Questions