Media query – demo of min-width,
Instructions & Explanation

This refers to this demo page.

Observe

• First, undock and float your browser tab that contains this page if it is docked with other tabs.
  • This will allow you to more easily change the width of the browser containing this page.
• Now, change the width of your browser by dragging its side edges or corners.
• As you do, observe the four color backgrounds.
  • They change color based on the width of the browser.

Investigate

• Look at the source code of this page — right-click anywhere on this page and select View Page Source or something similar .
  • The command terms vary slightly between browsers.
• There are three media query rules and one standard rule for the class .test
• Each specifies a different background color.
• The rules are applied based on:
  1. The default background color is pink. It applies to the narrowest widths, from 0px up to...
  2. 500px - the background is light green - up to...
  3. 700px - the background is light blue - up to...
  4. 900px and higher - the background color is yellow

About minimum width (min-width)

In the context of media queries the term minimum means the following:

• The minimum is the width specified, and any amounts greater than it.
• It does not mean any amounts lower than it.
• If the minimum width is met, then the rule is applied for that width and for greater widths, unless there are min-width media queries for larger sizes which will then supersede it.
• If the minimum width is not met, a lower min-width, or the non-media query width rule, will be applied.

The stacking order of media queries can have an effect

• There is an important additional consideration when coding min-width and some other types of media queries.
  • The vertical position of the media query rules in the code can make a considerable difference.
• If the code for the shortest minimum width (or else the non-media query rule) is beneath the code for the other rules in the code, then the rule lowest in the code will take precedence because its criteria have been met.
  • Therefore it will not be superseded by the other media queries above it that specify greater widths.
  • This conforms with the CSS precedence rule: if there is more than one value specified for a property for the same selector, the rule that is closest to the element in the code (which will be the lowest one) will win - and, with media queries, the one that satisfies the media query requirements that is closest will take precedence.
  • If the rule is closest to the selected element and if it meets any specified criteria in its media query, or it is not part of a media query, then it takes precedence over the other rules.
• For example:
  • If the embedded CSS code in this demo file had the 500px min-width media query for the class .test coded was beneath the other media queries that specify higher minimum widths, it will take precedence over the others when the width is 500px or wider.
    • If it is closest but does not meet the 500px min-width specified in its query, then the non-media query rule will take precedence because it specifies a default background color for .test for the class when no media queries have been satisfied. widths lower than 500px.
  • This is even though the other media queries specify other widths, widths that are in greater compliance with the browser's width – those will be ignored because the media query closer to the targeted element has its criteria met and therefore takes precedence in spite of those above. Their criteria may be met however they are irrelevant.
  • In this case the top rule for .test, which is not a part of a media query, specifies a pink background, which is what you will see if you make your browser window very narrow. It is applied because none of the media query apply to widths of less than 500px.
• Therefore, in addition to providing the media queries, the vertical sequence that they are coded in must be in the proper order in the code or else they may not have an effect.

Dreamweaver users:

Experiment with the VMQ interface above Live View.

1. Create a new HTML file in Dreamweaver
2. Click in Code view.
3. Press Ctrl-A/Cmd-A to select all of the code.
4. Delete it.
5. View the source code for this page.
6. Press Ctrl-A/Cmd-A to select all of the code.
7. Press Ctrl-C/Cmd-C to copy all of the code.
8. Click in Code view in Dreamweaver (it ought to be empty).
9. Press Ctrl-V/Cmd-V to paste the copied code.
10. Use Live View and the Visual Media Query bars to view, modify, and add to the existing media queries. You can also modify them in CSS Designer.
11. Have fun!