Add note about min-/max- shortcoming vs proper range context

Closes #984
Additionally, wraps `<div class="note">` around the note in range
context prose.

Author: patrickhlauke

mediaqueries/Overview.bs

@@ -634,6 +634,34 @@ Using “min-” and “max-” Prefixes On Range Features</h4>
 			For example, ''(max-width: 40em)'' is equivalent to ''(width <= 40em)''.
 	</ul>
 
+	Note: because “min-” and “max-” both equate to range comparisons that <strong>include</strong> the value,
+	they may be limiting in certain situations.
+
+	<div class='example'>
+		For instance,
+		authors trying to define different styles based on a breakpoint in the viewport width using “min-” and “max-”
+		would generally offset the values they're comparing,
+		to ensure that both queries don't evaluate to true simultaneously.
+		Assuming the breakpoint is at 320px, authors would conceptually use:
+
+		<pre>
+			@media (max-width: 320px) { /* styles for viewports <= 320px */ }
+			@media (min-width: 321px) { /* styles for viewports >= 321px */ }
+		</pre>
+
+		While this ensures that the two sets of styles don't apply simultaneously when the viewport width is 320px,
+		it does not take into account the possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities
+		(e.g. on high-dpi displays or as a result of zooming/scaling).
+		Any viewport widths that fall between 320px and 321px will result in none of the styles being applied.
+
+		In these situations, <a>range context</a> queries (which are not limited to “>=” and “<=” comparisons) offer a more appropriate solution:
+
+		<pre>
+			@media (width <= 320px) { /* styles for viewports <= 320px */ }
+			@media (width > 320px) { /* styles for viewports > 320px */ }
+		</pre>
+	</div>
+
 	“Discrete” type properties do not accept “min-” or “max-” prefixes.
 	Adding such a prefix to a “discrete” type <a>media feature</a> simply results in an unknown feature name.