Khóa học IT CSS Cơ bản 033_Bố cục Responsive

Bố cục Responsive

Bố cục responsive là một phương pháp thiết kế web có thể thích ứng với các kích thước màn hình và thiết bị khác nhau. Bằng cách sử dụng bố cục responsive, bạn có thể đảm bảo rằng trang web duy trì hiệu ứng hiển thị tốt trên các thiết bị khác nhau, dù là trên máy tính để bàn, máy tính bảng hay điện thoại di động.

Media Query

Sử dụng media query của CSS, bạn có thể áp dụng các kiểu khác nhau dựa trên đặc điểm của thiết bị (như chiều rộng màn hình, chiều cao, loại thiết bị, v.v.). Điều này cho phép bạn định nghĩa các bố cục khác nhau cho các kích thước màn hình khác nhau.

Ví dụ:

1
/* PC */
2
@media (min-width: 992px) {
3
    * {
4
        background: yellow
5
    }
6
}
7
/* Máy tính bảng */
8
@media (min-width: 768px) and (max-width: 992px) {
9
    * {
10
        background: red
11
    }
12
}
13
/* Điện thoại thông thường */
14
@media (min-width: 576px) and (max-width: 768px) {
15
    * {
16
        background: green
17
    }
18
}
19
/* Thiết bị màn hình nhỏ */
20
@media (max-width: 576px) {
21
    * {
22
       background: blue
23
    }
24
}

Hiệu ứng:

Hình ảnh Responsive

Sử dụng max-width: 100%; để đảm bảo hình ảnh và các phần tử media không vượt quá container trên màn hình nhỏ. Ví dụ:

1
    img {
2
      max-width: 100%; /* Chiều rộng tối đa của hình ảnh là 100% của phần tử chứa nó */
3
      height: auto;    /* Duy trì tỷ lệ khung hình để ngăn hình ảnh bị biến dạng */
4
    }
5

6
    /* Điều chỉnh kích thước hình ảnh trên màn hình nhỏ */
7
    @media screen and (max-width: 600px) {
8
      img {
9
        max-width: 50%; /* Chiều rộng tối đa của hình ảnh là 50% của phần tử chứa nó */
10
      }
11
    }

1
    <img src="zhaojian.jpg" alt="Responsive Image">

Hiệu ứng:

Cài đặt Viewport

Sử dụng thẻ <meta> để đặt viewport nhằm đảm bảo trang được thu phóng chính xác trên thiết bị di động.

Ví dụ:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Thẻ meta này cho trình duyệt di động biết rằng chúng nên đặt chiều rộng viewport bằng chiều rộng thiết bị, và phóng to tài liệu lên 100% kích thước dự định, hiển thị tài liệu ở kích thước tối ưu hóa cho di động mà bạn muốn.

Cùng với thẻ meta viewport, bạn có thể sử dụng một số cài đặt khác, nhưng nói chung, dòng trên là những gì bạn muốn sử dụng.

• initial-scale: Đặt mức thu phóng ban đầu của trang, chúng ta đặt là 1.
• height: Đặt cụ thể một chiều cao cho viewport.
• minimum-scale: Đặt mức thu phóng tối thiểu.
• maximum-scale: Đặt mức thu phóng tối đa.
• user-scalable: Nếu đặt là no, ngăn thu phóng.

Tránh sử dụng minimum-scale, maximum-scale, đặc biệt là đặt user-scalable thành no. Điều này đảm bảo người dùng có thể tự phóng to và thu nhỏ.