File tree Expand file tree Collapse file tree 1 file changed +10
-1
lines changed Expand file tree Collapse file tree 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>
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 */ }
You can’t perform that action at this time.
0 commit comments