From 98ff70c09775322026f00034b6a69b27885c9df7 Mon Sep 17 00:00:00 2001 From: patrickhlauke Date: Tue, 17 Oct 2017 01:54:23 +0100 Subject: [PATCH] Expand example for min-/max- shortcoming vs proper range context A follow-up to https://github.com/w3c/csswg-drafts/pull/1083 that further expands the example to also include use of high-precision values (while we wait for browsers to support range context queries) --- mediaqueries-4/Overview.bs | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/mediaqueries-4/Overview.bs b/mediaqueries-4/Overview.bs index 574f5fc7b84..628a79b66ff 100644 --- a/mediaqueries-4/Overview.bs +++ b/mediaqueries-4/Overview.bs @@ -735,8 +735,17 @@ Using “min-” and “max-” Prefixes On Range Features 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. + + One approach to work around this problem is to increase the precision of the values used for the comparison. Using the example above, + changing the second comparison value to 320.01px significantly reduces the change that a viewport width on a device would fall + between the cracks. + + 
+			@media (max-width: 320px) { /* styles for viewports <= 320px */ }
+			@media (min-width: 320.01px) { /* styles for viewports >= 320.01px */ }
+
- In these situations, range context queries (which are not limited to “>=” and “<=” comparisons) offer a more appropriate solution: + However, in these situations, range context queries (which are not limited to “>=” and “<=” comparisons) offer a more appropriate solution: 
 			@media (width <= 320px) { /* styles for viewports <= 320px */ }