CSS generator
Media Query Generator — CSS Breakpoint Snippets
Generate @media rules for any viewport width. Pick a device from our database to auto-fill real CSS viewport dimensions, or enter custom values.
Media query generator
Enter dimensions or pick a device to generate copy-ready CSS media queries.
max-width
@media (max-width: 390px) {
/* styles for viewports up to 390px */
}min-width
@media (min-width: 390px) {
/* styles for viewports 390px and wider */
}max-height
@media (max-height: 844px) {
/* styles for viewports up to 844px tall */
}range (min + max width)
@media (min-width: 389px) and (max-width: 390px) {
/* narrow band around 390px */
}tailwind note
/* Tailwind arbitrary breakpoint */
@media (min-width: 390px) {
.custom\:390 { /* utility at 390px+ */ }
}When to use media queries
Media queries let you apply styles based on viewport size, orientation, or user preferences. Pair generated snippets with our breakpoint checker to verify which Tailwind tiers match a width.