From 6abf748cd2f7ec54183cd00f111089582a99b802 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Tue, 7 Mar 2017 12:48:04 +0000
Subject: [PATCH] Add note about min-/max- shortcoming vs proper range context

Closes https://github.com/w3c/csswg-drafts/issues/984
---
 mediaqueries/Overview.bs | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/mediaqueries/Overview.bs b/mediaqueries/Overview.bs
index 39b15a0abf2..b5dc0cf9935 100644
--- a/mediaqueries/Overview.bs
+++ b/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.