Cách sử dụng Media Queries cho các breakpoint thiết bị phổ biến với CSS

Giới thiệu

Media Queries là trái tim của Responsive Design, cho phép áp dụng CSS khác nhau tùy theo đặc tính thiết bị (chiều rộng màn hình, orientation, resolution...). Bài viết minh họa các breakpoint tiêu chuẩn.

Cú pháp cơ bản

@media mediatype and (feature: value) {
    /* CSS rules */
}

Ví dụ: @media screen and (max-width: 768px) { ... }

Ví dụ minh họa: Đổi màu nền theo breakpoint

Code sau thay đổi màu nền body tại 5 breakpoint phổ biến:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            color: white;
            padding: 2rem;
            text-align: center;
            transition: background 0.3s ease;
        }
        h1 { margin-bottom: 0.5rem; }
        h2 { font-weight: normal; font-size: 1.2rem; opacity: 0.9; }
        
        /* Breakpoints - Mobile First */
        body { background: rgb(207, 60, 151); } /* Default: < 600px - Mobile */
        
        @media only screen and (min-width: 600px) {
            body { background: rgb(0, 128, 107); } /* Small tablet */
        }
        @media only screen and (min-width: 768px) {
            body { background: rgb(226, 136, 18); } /* Tablet portrait */
        }
        @media only screen and (min-width: 992px) {
            body { background: rgb(108, 25, 185); } /* Laptop */
        }
        @media only screen and (min-width: 1200px) {
            body { background: rgb(13, 124, 63); } /* Desktop */
        }
    </style>
</head>
<body>
    <h1>Typical Breakpoints Demo</h1>
    <h2>Resize màn hình để thấy màu nền thay đổi tại các breakpoint</h2>
    <p>Current width: <span id="w"></span>px</p>
    <script>
        const w = document.getElementById('w');
        function update() { w.textContent = window.innerWidth; }
        window.addEventListener('resize', update);
        update();
    </script>
</body>
</html>

Bảng Breakpoints tiêu chuẩn (Bootstrap 5 / Tailwind CSS)

Media Queries nâng cao

1. Orientation (xoay màn hình)

@media (orientation: portrait) { /* dọc */ }
@media (orientation: landscape) { /* ngang */ }

2. High-DPI / Retina displays

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* CSS cho màn hình Retina/High-DPI */
}

3. Prefers-reduced-motion (Accessibility)

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

4. Prefers-color-scheme (Dark mode)

@media (prefers-color-scheme: dark) {
    body { background: #1a1a1a; color: #eee; }
}

5. Container Queries (CSS mới, hỗ trợ Chrome 105+, Firefox 110+, Safari 16+)

.card-container { container-type: inline-size; }
@container (min-width: 400px) {
    .card { display: flex; }
}

Container Queries cho phép style dựa trên kích thước container cha thay vì viewport - cực mạnh cho component-based design.

Best Practices

• Luôn dùng Mobile-First (min-width) - code ít hơn, hiệu năng tốt hơn.
• Gom các breakpoint chung vào file _variables.scss hoặc :root { --bp-sm: 640px; ... }.
• Tránh lồng media query quá sâu (max 2-3 cấp).
• Test trên thiết bị thật, không chỉ devtools.