+ For instance,
+ authors trying to define different styles based on a breakpoint in the viewport width using “min-” and “max-”
+ would generally offset the values they're comparing,
+ to ensure that both queries don't evaluate to true simultaneously.
+ Assuming the breakpoint is at 320px, authors would conceptually use:
+
+
+ @media (max-width: 320px) { /* styles for viewports <= 320px */ }
+ @media (min-width: 321px) { /* styles for viewports >= 321px */ }
+
+
+ While this ensures that the two sets of styles don't apply simultaneously when the viewport width is 320px,
+ 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.
+
+ 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 */ }
+ @media (width > 320px) { /* styles for viewports > 320px */ }
+
+