Cách tạo website responsive hoạt động trên mọi thiết bị: PC, Laptop, Tablet, Phone

Giới thiệu

Responsive Web Design (RWD) đảm bảo website hiển thị tốt trên mọi kích thước màn hình: desktop, laptop, tablet, điện thoại. Bài viết này trình bày ví dụ hoàn chỉnh với header, navigation, main content, footer responsive.

Ví dụ hoàn chỉnh (Mobile-First Approach)

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Responsive Website</title>
    <style>
        * { box-sizing: border-box; }
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0; line-height: 1.6; }
        
        /* Header */
        .header {
            padding: 60px 20px;
            text-align: center;
            background: #7b1abc;
            color: white;
        }
        .header h1 { font-size: 2.5rem; margin: 0; }
        
        /* Navigation */
        nav {
            width: 100%;
            background-color: #272727;
            overflow: auto;
        }
        .links {
            display: inline-block;
            text-align: center;
            padding: 14px 20px;
            color: #b289fd;
            text-decoration: none;
            font-size: 1rem;
            white-space: nowrap;
        }
        .links:hover { background-color: #646464; color: white; }
        .selected { background-color: #00122b; color: white; }
        
        /* Main content */
        main { padding: 20px; max-width: 1200px; margin: 0 auto; }
        
        /* Footer */
        .footer {
            padding: 20px;
            text-align: center;
            color: white;
            background: #ff0000;
        }
        
        /* Responsive breakpoints */
        @media (min-width: 768px) {
            .header h1 { font-size: 3.5rem; }
            .links { padding: 14px 30px; font-size: 1.1rem; }
        }
        @media (min-width: 992px) {
            .header { padding: 80px 20px; }
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>Website Responsive</h1>
    </header>
    
    <nav>
        <a class="links selected" href="#">Home</a>
        <a class="links" href="#">Login</a>
        <a class="links" href="#">Register</a>
        <a class="links" href="#">Contact Us</a>
        <a class="links" href="#">More Info</a>
    </nav>
    
    <main>
        <article>
            <h2>Sample Heading</h2>
            <time>Published in January</time>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, autem.</p>
        </article>
        <article>
            <h2>Sample Heading</h2>
            <time>Published in March</time>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde quo minus fugiat tempora quae ratione dignissimos exercitationem voluptate officiis reiciendis.</p>
        </article>
    </main>
    
    <footer class="footer">
        <h2>Footer</h2>
    </footer>
</body>
</html>

Nguyên tắc cốt lõi của Responsive Design

1. Viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1"> - bắt buộc.
2. Box-sizing: border-box: Áp dụng toàn bộ (*) để padding/border không phá vỡ layout.
3. Đơn vị tương đối: %, rem, em, vw, vh thay vì px cố định cho layout.
4. Mobile-First: Viết CSS cho mobile trước, dùng @media (min-width: ...) mở rộng cho màn hình lớn.
5. Breakpoints phổ biến:
   • 576px: Mobile large / Small tablet
   • 768px: Tablet portrait
   • 992px: Tablet landscape / Small laptop
   • 1200px: Desktop
   • 1400px: Large desktop
6. Hình ảnh responsive: img { max-width: 100%; height: auto; }.

Cải tiến hiện đại cho ví dụ trên

• Navbar: Dùng Flexbox + hamburger menu trên mobile (cần JS).
• Layout chính: CSS Grid cho main content (sidebar + content).
• Typography: clamp() cho font-size scale mượt mà.
• Container: Class .container dùng chung với max-width: 1200px; margin: 0 auto; padding: 0 20px;.