Media Queries

Code

/* Mobile first */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        padding: 20px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

/* Large screen */
@media (min-width: 1440px) {
    .container {
        max-width: 1200px;
    }
}

/* Orientation */
@media (orientation: landscape) {
    .grid { grid-template-columns: 1fr 1fr; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body { background: #1a1a1a; color: #f0f0f0; }
}

/* Reduce animation */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Print */
@media print {
    .no-print { display: none; }
    body { font-size: 12pt; }
}

/* Hover support */
@media (hover: hover) {
    .card:hover { transform: scale(1.05); }
}

Explanation

Media queries apply different styles based on screen size, orientation, theme, etc.; mobile-first goes from small to large.

More CSS Snippets