File tree 1 file changed +10
-1
lines changed
1 file changed +10
-1
lines changed Original file line number Diff line number Diff line change @@ -735,8 +735,17 @@ Using “min-” and “max-” Prefixes On Range Features</h4>
735
735
it does not take into account the possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities
736
736
(e.g. on high-dpi displays or as a result of zooming/scaling).
737
737
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>
738
747
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:
740
749
741
750
<pre>
742
751
@media (width <= 320px) { /* styles for viewports <= 320px */ }
You can’t perform that action at this time.
0 commit comments