CalculateY
Quick Answer
A tablet-and-up media query is @media (min-width: 768px). To target only tablets, combine constraints: @media (min-width: 768px) and (max-width: 1024px).
Constraints
Common Breakpoints
Common Examples
| Input | Result |
|---|---|
| min-width: 768px | @media (min-width: 768px) { ... } |
| min-width: 768px, max-width: 1024px | @media (min-width: 768px) and (max-width: 1024px) { ... } |
| max-width: 600px, orientation: portrait | @media (max-width: 600px) and (orientation: portrait) { ... } |
| min-width: 1200px | @media (min-width: 1200px) { ... } |
| min-width: 576px, max-width: 767px | @media (min-width: 576px) and (max-width: 767px) { ... } |
How It Works
CSS media queries enable responsive design by applying different styles based on the characteristics of the user’s device or viewport. The @media rule wraps a block of CSS that only takes effect when the specified conditions are true.
Syntax
@media (feature: value) and (feature: value) { … }
Multiple conditions are combined with and. The or logic is achieved by separating queries with commas. The not keyword inverts an entire query.
Width-Based Queries (Most Common)
- min-width targets viewports at least the specified width (mobile-first approach)
- max-width targets viewports at most the specified width (desktop-first approach)
Most modern CSS frameworks use a mobile-first approach with min-width breakpoints, where base styles apply to mobile and progressively larger breakpoints add styles for wider screens.
Height-Based Queries
Height queries are less common but useful for landscape detection on mobile devices, fixed-position elements, and above-the-fold content. They follow the same min-height and max-height syntax.
Orientation
The orientation feature detects whether the viewport is taller than it is wide (portrait) or wider than it is tall (landscape). This is useful for adjusting layouts on tablets that can be rotated.
Worked Example
To target tablets in portrait orientation: min-width = 768px (standard tablet width), max-width = 1024px (upper tablet range), orientation = portrait. The generated query is:
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* tablet portrait styles */
}
This query evaluates to true only when all three conditions are met simultaneously. A 768px-wide viewport in landscape would not match because the orientation condition fails.
Common Breakpoint Sets
Bootstrap 5 breakpoints: 576px (sm), 768px (md), 992px (lg), 1200px (xl), 1400px (xxl). Tailwind CSS breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl), 1536px (2xl). Both frameworks use a mobile-first approach with min-width queries.
Related Calculators
Frequently Asked Questions
What is the difference between min-width and max-width?
min-width targets viewports that are at least the specified width (and wider). It is the foundation of mobile-first responsive design: base styles apply to small screens, and min-width breakpoints progressively enhance for larger screens. max-width targets viewports up to the specified width (and narrower), used in desktop-first approaches.
What breakpoints should I use for responsive design?
What is the mobile-first approach?
min-width media queries to add or override styles for progressively larger viewports. This approach encourages simpler mobile layouts and adds complexity only when screen space allows. It also reduces the amount of CSS small devices need to parse.
Can I combine width and height in one media query?
and keyword to combine any number of conditions: @media (min-width: 768px) and (min-height: 600px). All conditions must be true for the styles inside to apply.
Do media queries affect JavaScript?
window.matchMedia('(min-width: 768px)'). This returns a MediaQueryList object with a matches property (true or false) and an event listener for changes. This is useful for loading different components or behaviors at different viewport sizes.