1. Giới thiệu

Responsive web design (thiết kế web đáp ứng) là kỹ thuật giúp trang web tự động điều chỉnh giao diện và bố cục sao cho phù hợp với mọi kích thước màn hình, từ máy tính để bàn đến máy tính bảng và điện thoại di động. Điều này giúp người dùng có trải nghiệm nhất quán trên mọi thiết bị mà không cần thiết kế nhiều phiên bản khác nhau của trang web.

Trong bài viết này, chúng ta sẽ tìm hiểu về các kỹ thuật và phần tử HTML cũng như CSS giúp tạo ra một trang web responsive.

2. Viewport và thẻ meta viewport

Thẻ <meta>viewport là một trong những yếu tố cơ bản và quan trọng để đảm bảo rằng trang web của bạn tương thích với thiết bị di động. Thẻ này giúp trình duyệt hiểu kích thước và tỷ lệ của trang web để hiển thị chính xác trên các thiết bị khác nhau.

Cú pháp:

html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width: Điều chỉnh chiều rộng của trang sao cho khớp với chiều rộng của thiết bị.
  • initial-scale=1.0: Thiết lập tỷ lệ thu phóng ban đầu là 1, đảm bảo trang được hiển thị ở tỷ lệ thực.

3. Sử dụng phần trăm và đơn vị viewport trong CSS

Để tạo ra các bố cục đáp ứng, bạn nên sử dụng các đơn vị đo lường linh hoạt như %, vw (viewport width), và vh (viewport height). Điều này giúp các phần tử trên trang thay đổi kích thước dựa trên kích thước màn hình của thiết bị.

Ví dụ:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bố cục đáp ứng</title>
    <style>
        .container {
            width: 80%; /* Sử dụng 80% chiều rộng của viewport */
            margin: 0 auto;
        }
        .box {
            width: 50%; /* Mỗi box chiếm 50% chiều rộng của container */
            height: 200px;
            background-color: lightblue;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Hộp 1</div>
        <div class="box">Hộp 2</div>
    </div>
</body>
</html>

4. Sử dụng Media Queries trong CSS

Media Queries là công cụ mạnh mẽ giúp bạn thay đổi bố cục dựa trên kích thước màn hình hoặc loại thiết bị. Điều này cho phép bạn điều chỉnh cách hiển thị nội dung trên các thiết bị khác nhau như điện thoại, máy tính bảng và máy tính để bàn.

Cú pháp Media Queries:

css
@media only screen and (max-width: 768px) {
    /* CSS cho màn hình có chiều rộng tối đa 768px */
    .box {
        width: 100%; /* Hộp sẽ chiếm toàn bộ chiều rộng màn hình khi ở trên thiết bị nhỏ */
    }
}

Ví dụ đầy đủ:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive với Media Queries</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
        }
        .box {
            width: 50%;
            height: 200px;
            background-color: lightblue;
            margin: 10px;
            float: left;
        }

        /* Khi màn hình nhỏ hơn hoặc bằng 768px */
        @media only screen and (max-width: 768px) {
            .box {
                width: 100%; /* Hộp sẽ chiếm 100% chiều rộng trên màn hình nhỏ */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Hộp 1</div>
        <div class="box">Hộp 2</div>
    </div>
</body>
</html>

5. Hệ thống lưới (Grid System) trong thiết kế responsive

Hệ thống lưới là một kỹ thuật phổ biến giúp bạn xây dựng các bố cục responsive hiệu quả và dễ quản lý. Một trong những framework phổ biến hỗ trợ hệ thống lưới là Bootstrap.

Ví dụ sử dụng hệ thống lưới của Bootstrap:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive với Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="p-3 bg-primary text-white">Cột 1</div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="p-3 bg-secondary text-white">Cột 2</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
  • col-md-6: Khi màn hình có kích thước trung bình trở lên (>=768px), mỗi cột sẽ chiếm 50% chiều rộng.
  • col-sm-12: Khi màn hình có kích thước nhỏ (<768px), mỗi cột sẽ chiếm toàn bộ chiều rộng (100%).

6. Hình ảnh đáp ứng (Responsive Images)

Khi thiết kế web responsive, bạn cũng cần đảm bảo rằng hình ảnh có thể tự động điều chỉnh kích thước theo màn hình của thiết bị. Bạn có thể sử dụng thuộc tính max-width và height: auto trong CSS để làm cho hình ảnh tự điều chỉnh kích thước.

Ví dụ:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hình ảnh đáp ứng</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <img src="https://via.placeholder.com/800x400" alt="Hình ảnh minh họa">
</body>
</html>

Trong ví dụ này, hình ảnh sẽ tự động điều chỉnh kích thước dựa trên chiều rộng của phần tử chứa nó mà không bị kéo dãn hoặc làm biến dạng.

7. Sử dụng Flexbox và CSS Grid để tạo bố cục đáp ứng

Flexbox và CSS Grid là hai công cụ mạnh mẽ trong CSS giúp bạn tạo các bố cục đáp ứng linh hoạt.

Ví dụ sử dụng Flexbox:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bố cục đáp ứng với Flexbox</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .box {
            flex: 1 1 300px;
            margin: 10px;
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Hộp 1</div>
        <div class="box">Hộp 2</div>
        <div class="box">Hộp 3</div>
    </div>
</body>
</html>

Trong ví dụ này:

  • display: flex: Đặt bố cục Flexbox cho container.
  • flex: 1 1 300px: Các hộp sẽ tự động điều chỉnh kích thước với chiều rộng tối thiểu là 300px.

Ví dụ sử dụng CSS Grid:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bố cục đáp ứng với CSS Grid</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }
        .grid-item {
            background-color: lightgreen;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Ô 1</div>
        <div class="grid-item">Ô 2</div>
        <div class="grid-item">Ô 3</div>
        <div class="grid-item">Ô 4</div>
    </div>
</body>
</html>

Trong ví dụ này, CSS Grid sẽ tự động điều chỉnh số cột dựa trên kích thước màn hình, đảm bảo bố cục luôn gọn gàng và tương thích.

8. Kết luận

Thiết kế responsive là một yếu tố không thể thiếu trong xây dựng trang web hiện đại. Bằng cách sử dụng viewport, Media Queries, Flexbox, CSS Grid, và các framework như Bootstrap, bạn có thể dễ dàng tạo ra một trang web tương thích với mọi kích thước màn hình, từ máy tính để bàn đến thiết bị di động.

Hãy áp dụng những kỹ thuật trên vào các dự án thực tế để đảm bảo trang web của bạn luôn hiển thị tốt trên mọi thiết bị!