Bài 8.5: Bài tập thực hành responsive web

Chào mừng các bạn quay trở lại với chuỗi bài viết về Lập trình Web Front-end! Sau khi đã tìm hiểu về các khái niệm và công cụ của Responsive Web Design, đã đến lúc chúng ta xắn tay áo lên và thực hành để biến lý thuyết thành kỹ năng thực tế. Bài viết này sẽ tập trung vào các bài tập cụ thể giúp bạn nắm vững cách xây dựng giao diện web linh hoạt, trông đẹp mắt và hoạt động mượt mà trên mọi kích thước màn hình.

Thực hành là chìa khóa để thành thạo responsive design. Chúng ta sẽ làm việc với HTML và CSS, sử dụng những kỹ thuật phổ biến như Media Queries, Flexbox và các đơn vị đo lường linh hoạt.

Bắt đầu thôi!

Bài tập 1: Xây dựng layout cơ bản với Media Queries

Hãy bắt đầu với một bài tập kinh điển: tạo một layout gồm hai cột trên màn hình lớn và tự động chuyển thành một cột (stack) trên màn hình nhỏ hơn.

HTML:

<div class="container">
    <div class="column left">Nội dung cột trái</div>
    <div class="column right">Nội dung cột phải</div>
</div>

CSS:

.container {
    display: flex; /* Sử dụng Flexbox để tạo layout cột */
    gap: 20px; /* Khoảng cách giữa các cột */
    padding: 20px;
}

.column {
    flex: 1; /* Mỗi cột chiếm phần không gian bằng nhau */
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
}

/* Media Query cho màn hình nhỏ */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Đổi hướng các item thành cột (stack) */
    }

    .column {
        flex: unset; /* Bỏ thuộc tính flex để các cột chiếm toàn bộ chiều rộng */
        width: 100%; /* Đảm bảo mỗi cột chiếm 100% chiều rộng container */
    }
}

Giải thích:

  • Chúng ta sử dụng Flexbox (display: flex;) để dễ dàng tạo layout cột trên màn hình mặc định (lớn).
  • Thuộc tính flex: 1; giúp các cột tự động chia sẻ không gian còn lại trong container.
  • Điểm mấu chốt là @media (max-width: 768px). Đây là Media Query nói rằng "áp dụng các style sau đây khi chiều rộng màn hình nhỏ hơn hoặc bằng 768px".
  • Bên trong Media Query, chúng ta thay đổi flex-direction thành column, khiến các item (các .column) thay vì nằm ngang sẽ xếp chồng lên nhau theo chiều dọc.
  • Chúng ta cũng đặt flex: unset; và width: 100%; để đảm bảo mỗi cột chiếm trọn chiều rộng khi đã xếp chồng.

Hãy thử thay đổi kích thước cửa sổ trình duyệt của bạn và xem điều kỳ diệu xảy ra!

Bài tập 2: Responsive Images

Hình ảnh thường là "thủ phạm" phá vỡ layout trên các thiết bị nhỏ. Hãy đảm bảo hình ảnh của bạn luôn nằm gọn trong container của nó và không gây tràn.

HTML:

<div class="image-container">
    <img src="your-image.jpg" alt="Mô tả hình ảnh">
</div>

CSS:

.image-container {
    max-width: 600px; /* Giả sử container có chiều rộng tối đa */
    margin: 20px auto; /* Căn giữa */
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center; /* Để căn giữa ảnh nếu ảnh nhỏ hơn container */
}

.image-container img {
    max-width: 100%; /* Đây là bí quyết! */
    height: auto; /* Giữ tỷ lệ khung hình */
    display: block; /* Loại bỏ khoảng trống dưới ảnh */
    margin: 0 auto; /* Căn giữa ảnh trong container text-align center */
}

Giải thích:

  • Thuộc tính max-width: 100%; áp dụng cho thẻ <img> là cực kỳ quan trọng. Nó đảm bảo rằng chiều rộng của hình ảnh sẽ không bao giờ vượt quá chiều rộng của phần tử cha chứa nó (trong trường hợp này là .image-container). Nếu hình ảnh ban đầu lớn hơn container, nó sẽ tự động co lại bằng kích thước container.
  • height: auto; đi kèm với max-width: 100%; giúp duy trì tỷ lệ khung hình ban đầu của ảnh. Khi chiều rộng co lại, chiều cao cũng tự động điều chỉnh theo, tránh ảnh bị méo.
  • display: block; và margin: 0 auto; giúp hình ảnh hoạt động độc lập và được căn giữa một cách chính xác trong container.

Với hai dòng CSS đơn giản này, hình ảnh của bạn đã trở nên responsive!

Bài tập 3: Responsive Navigation Menu (Đơn giản)

Một thanh điều hướng ngang trên desktop thường cần được chuyển thành một dạng khác (ví dụ: xếp chồng, menu ẩn/hiện) trên mobile. Với CSS đơn thuần, chúng ta có thể làm cho nó xếp chồng.

HTML:

<nav class="main-nav">
    <ul>
        <li><a href="#">Trang chủ</a></li>
        <li><a href="#">Giới thiệu</a></li>
        <li><a href="#">Dịch vụ</a></li>
        <li><a href="#">Liên hệ</a></li>
    </ul>
</nav>

CSS:

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Mặc định hiển thị ngang */
    background-color: #333;
    justify-content: center; /* Căn giữa các mục */
}

.main-nav li {
    margin: 0 15px;
}

.main-nav a {
    display: block; /* Để padding và margin hoạt động tốt hơn */
    color: white;
    text-decoration: none;
    padding: 15px 10px;
}

.main-nav a:hover {
    background-color: #555;
}

/* Media Query cho màn hình nhỏ */
@media (max-width: 600px) {
    .main-nav ul {
        flex-direction: column; /* Chuyển sang xếp chồng dọc */
        align-items: center; /* Căn giữa các mục khi xếp chồng */
    }

    .main-nav li {
        margin: 0; /* Bỏ margin ngang */
        width: 100%; /* Các mục chiếm toàn bộ chiều rộng */
        text-align: center; /* Căn giữa text trong mỗi mục */
    }

    .main-nav a {
        padding: 10px; /* Điều chỉnh padding cho mobile */
    }
}

Giải thích:

  • Ban đầu, danh sách các mục menu (ul) được thiết lập với display: flex; để các mục (li) nằm ngang.
  • Media Query @media (max-width: 600px) kích hoạt khi màn hình nhỏ hơn 600px.
  • Chúng ta thay đổi flex-direction của ul thành column, khiến các mục menu xếp chồng lên nhau.
  • Điều chỉnh margin, width, text-align và padding để các mục menu trông đẹp và dễ bấm hơn trên màn hình di động khi đã xếp chồng.

Đây là cách đơn giản nhất để làm menu responsive chỉ với CSS. Đối với menu "hamburger" phức tạp hơn, bạn sẽ cần kết hợp thêm JavaScript để điều khiển việc ẩn/hiện.

Bài tập 4: Responsive Typography và Spacing

Đôi khi, bạn muốn cỡ chữ hoặc khoảng cách giữa các phần tử thay đổi tùy theo kích thước màn hình để tối ưu trải nghiệm đọc.

CSS:

body {
    font-size: 16px; /* Cỡ chữ mặc định */
    line-height: 1.6;
}

h1 {
    font-size: 2.5em; /* Cỡ chữ tiêu đề lớn */
    margin-bottom: 0.5em;
}

p {
    margin-bottom: 1em;
}

/* Media Query cho màn hình lớn hơn */
@media (min-width: 992px) {
    body {
        font-size: 18px; /* Tăng cỡ chữ trên màn hình lớn */
    }

    h1 {
        font-size: 3em; /* Tăng cỡ chữ tiêu đề thêm nữa */
    }
}

/* Media Query cho màn hình nhỏ hơn */
@media (max-width: 576px) {
    body {
        font-size: 15px; /* Giảm nhẹ cỡ chữ trên màn hình rất nhỏ */
    }

    h1 {
        font-size: 2em; /* Giảm cỡ chữ tiêu đề trên mobile */
    }
}

/* Ví dụ về spacing responsive */
.section {
    padding: 20px;
}

@media (min-width: 768px) {
    .section {
        padding: 40px; /* Tăng padding trên màn hình lớn hơn */
    }
}

Giải thích:

  • Chúng ta thiết lập cỡ chữ và khoảng cách cơ bản. Sử dụng đơn vị em hoặc rem cho cỡ chữ và em cho khoảng cách là một lựa chọn tốt vì chúng có tính tương đối với cỡ chữ gốc.
  • Sử dụng Media Queries với min-width và max-width để điều chỉnh font-size của body và h1 tại các điểm ngắt khác nhau. Điều này giúp văn bản dễ đọc hơn trên từng loại thiết bị.
  • Tương tự, chúng ta có thể điều chỉnh padding (hoặc margin) của các section để khoảng trắng phù hợp hơn với kích thước màn hình.

Kỹ thuật này giúp kiểm soát tốt hơn mật độ thông tin và trải nghiệm đọc trên các thiết bị đa dạng.

Comments

There are no comments at the moment.