+ Note: This syntax is new to Level 4 of Mediaqueries,
+ and thus is not as widely supported at the moment
+ as the ''min-''/''max-'' prefixes.
+
The basic form,
consisting of a feature name,
@@ -634,6 +636,34 @@ Using “min-” and “max-” Prefixes On Range Features
For example, ''(max-width: 40em)'' is equivalent to ''(width <= 40em)''.
+
+ Note that because “min-” and “max-” both equate to range comparisons that
include the value,
+ they may be limiting in certain situations.
+
+ 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 */ }
+
+