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 */ }