WPDS has 5 breakpoints with the following values
- sm: 768px
- md: 900px
- lg: 1024px
- xl: 1280px
- xxl: 1440px
WPDS Media At-Rules
| Name | Value | Description |
|---|---|---|
| sm | (max-width: 767px) | Targets the small breakpoint only |
| md | (min-width: 768px) and (max-width: 899px) | Targets the medium breakpoint only |
| lg | (min-width: 900px) and (max-width: 1023px) | Targets the large breakpoint only |
| xl | (min-width: 1024px) and (max-width: 1279px) | Targets the extra-large breakpoint only |
| xxl | (min-width: 1280px) and (max-width: 1440px) | Targets the extra-extra-large breakpoint only |
| minSm, notSm | (min-width: 768px) | A "mobile first" style breakpoint that targets the small breakpoint and above |
| minMd, notMd | (min-width: 900px) | A "mobile first" style breakpoint that targets the medium breakpoint and above |
| minLg, notLg | (min-width: 1024px) | A "mobile first" style breakpoint that targets the large breakpoint and above |
| minXl, notXl | (min-width: 1280px) | A "mobile first" style breakpoint that targets the extra-large breakpoint and above |
| minXxl, notXxl | (min-width: 1441px) | A "mobile first" style breakpoint that targets the extra-extra-large breakpoint and above |
| maxSm | (max-width: 767px) | A "desktop first" style breakpoint that targets the small breakpoint and below |
| maxMd | (max-width: 900px) | A "desktop first" style breakpoint that targets the medium breakpoint and below |
| maxLg | (max-width: 1024px) | A "desktop first" style breakpoint that targets the large breakpoint and below |
| maxXl | (max-width: 1280px) | A "desktop first" style breakpoint that targets the extra-large breakpoint and below |
| maxXxl | (max-width: 1441px) | A "desktop first" style breakpoint that targets the extra-extra-large breakpoint and below |
Using Rules
Responsive Variants
Stitches recommends defining variants that are applied responsively to keep component styles immutable.
Breakpoints in Style Objects
While not recommended it is possible to use breakpoints inline