Skip to content

Commit 2d75c52

Browse files
authored
Merge pull request #1884 from patrickhlauke/mq4-range-vs-minmax-expand
[mediaqueries-4] Expand example for min-/max- shortcoming vs proper range context
2 parents 8b3e9a4 + 98ff70c commit 2d75c52

File tree

1 file changed

+10
-1
lines changed

1 file changed

+10
-1
lines changed

mediaqueries-4/Overview.bs

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -735,8 +735,17 @@ Using “min-” and “max-” Prefixes On Range Features</h4>
735735
it does not take into account the possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities
736736
(e.g. on high-dpi displays or as a result of zooming/scaling).
737737
Any viewport widths that fall between 320px and 321px will result in none of the styles being applied.
738+
739+
One approach to work around this problem is to increase the precision of the values used for the comparison. Using the example above,
740+
changing the second comparison value to 320.01px significantly reduces the change that a viewport width on a device would fall
741+
between the cracks.
742+
743+
<pre>
744+
@media (max-width: 320px) { /* styles for viewports <= 320px */ }
745+
@media (min-width: 320.01px) { /* styles for viewports >= 320.01px */ }
746+
</pre>
738747

739-
In these situations, <a>range context</a> queries (which are not limited to “>=” and “<=” comparisons) offer a more appropriate solution:
748+
However, in these situations, <a>range context</a> queries (which are not limited to “>=” and “<=” comparisons) offer a more appropriate solution:
740749

741750
<pre>
742751
@media (width <= 320px) { /* styles for viewports <= 320px */ }

0 commit comments

Comments
 (0)