Rate this post

Quy tắc @media và Thiết Kế Đáp Ứng trong CSS

Quy tắc @media trong CSS cung cấp khả năng tạo kiểu dáng có điều kiện cho các phần tử trên trang web. Những điều kiện này có thể dựa trên loại phương tiện hoặc các đặc tính đã biết của thiết bị đang được sử dụng.

Việc kết hợp các truy vấn truyền thông với bố cục chất lỏng và hình ảnh linh hoạt là chìa khóa để triển khai thiết kế web đáp ứng. Điều này giúp trang web thích ứng với mọi kích thước màn hình và thiết bị, mang lại trải nghiệm người dùng tốt nhất.

Trong bài viết này, chúng ta sẽ xem xét cách các truy vấn @media có thể được sử dụng để điều chỉnh kiểu dáng trang web dựa trên thông tin thiết bị. Cũng sẽ thảo luận về hai cách tiếp cận để giải quyết bố cục trang trong thiết kế đáp ứng, giúp đảm bảo trải nghiệm người dùng linh hoạt và thân thiện trên mọi nền tảng. Hãy cùng W3seo tìm hiểu về @media

Truy vấn @Media là gì?

Media CSS, giới thiệu trong CSS3, là một công nghệ quan trọng cho việc tối ưu hóa trải nghiệm người dùng trên các thiết bị khác nhau. Nguyên lý cơ bản của nó là sử dụng thông số kích thước màn hình thông qua @media. Công cụ này giúp chia nhỏ CSS thành các phần khác nhau tương ứng với kích thước của từng loại thiết bị. Cú pháp của nó như sau:

@media not|only mediatype and (media feature) {
    CSS-Code;
}

Trong đó, mediatype có thể là:

  • all: Dành cho mọi thiết bị.
  • print: Dành cho máy in.
  • screen: Dành cho máy tính và thiết bị di động.

Trong lập trình web, chúng ta thường sử dụng ba thuộc tính trên. Trước khi khám phá các thuộc tính, cần phân biệt giữa hai khái niệm:

  • Device: Thiết bị sử dụng website như Laptop, Desktop, iPhone, …
  • Viewport: Kích thước hiển thị của giao diện.
<meta name="viewport" content="width=device-width, initial-scale=1">

Các media feature bao gồm:

  • aspect-ratio, min-aspect-ratio, max-aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của viewport.
  • color, color-index: Số bits hoặc số lượng màu sắc mà thiết bị có thể hiển thị.
  • device-aspect-ratio, max-device-aspect-ratio, min-device-aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của thiết bị.
  • Và nhiều thuộc tính khác như width, height, max-width, min-width, max-height, min-height, orientation, resolution.

Ví dụ: Nếu chiều rộng của trình duyệt nhỏ hơn hoặc bằng 480px, ẩn class .large.

@media only screen and (max-width: 480px){
  .large {
      display: none;
  }
}

Tạo Website Responsive với @media Query

Ngoài max-width, chúng ta còn sử dụng tham số khác như min-width khi sử dụng @media query. Mục đích của việc này là tạo ra các điều kiện để viết CSS dựa trên độ rộng của màn hình trên các thiết bị. Responsive design thực sự là sự kết hợp giữa media query và tính ưu tiên thực thi của CSS trên cùng một đối tượng.

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Media</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .left, .right {
            height: 400px;
        }

        .left {
            background: blue;
            float: left;
            width: 60%;
        }

        .right {
            background: red;
            float: right;
            width: 40%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
    </div>
</body>
</html>

Demo:

  • Nếu kích thước trình duyệt nhỏ hơn 769px, thì hiển thị thành 1 hàng dọc.
  • Ngược lại, hiển thị hai hàng dọc.
@media only screen and (max-width: 768px){
    .left, .right {
        float: none;
        width: 100%;
    }
}

Sử Dụng @media Cho Thiết Bị Di Động và Máy Tính

Với danh sách các thuộc tính của @media, việc nhận biết các thiết bị trở nên dễ dàng. Dưới đây là danh sách các câu truy vấn @media cho các thiết bị phổ biến.

PC First Trong Responsive

“PC first” là khái niệm chỉ việc phát triển giao diện responsive từ màn hình lớn xuống màn hình nhỏ. Để thực hiện điều này, chúng ta sử dụng max-width trong truy vấn media.

Dưới đây là các truy vấn media điển hình cần thêm vào dự án:

/* Ipad ngang (1024 x 768) */
@media screen and (max-width: 1024px) {

}
/* Ipad dọc (768 x 1024) */
@media screen and (max-width: 768px) {

}
/* Tablet nhỏ (480 x 640) */
@media screen and (max-width: 480px) {

}
/* Iphone (480 x 640) */
@media screen and (max-width: 320px) {

}
/* Smart phone nhỏ */
@media screen and (max-width: 240px) {

}

Nếu cần responsive trên nhiều thiết bị hơn, chúng ta xác định kích thước và thêm vào danh sách media query theo thứ tự từ màn hình lớn đến màn hình nhỏ.

Mobile First Trong Responsive

“Mobile first” bắt đầu quá trình responsive từ màn hình nhỏ và mở rộng lên các thiết bị có kích thước lớn hơn. Để thực hiện điều này, chúng ta sử dụng tham số min-width trong truy vấn media.

Dưới đây là các truy vấn media cho mô hình “Mobile First”:

/* Smart phone nhỏ */
@media screen and (min-width: 240px) {

}
/* Iphone (480 x 640) */
@media screen and (min-width: 320px) {

}
/* Tablet nhỏ (480 x 640) */
@media screen and (min-width: 480px) {

}
/* Ipad dọc (768 x 1024) */
@media screen and (min-width: 768px) {

}
/* Ipad ngang (1024 x 768) */
@media screen and (min-width: 1024px) {

}

Với mô hình này, các CSS cho cùng một đối tượng sẽ được ưu tiên từ màn hình nhỏ đến lớn, và CSS trong các truy vấn màn hình lớn hơn sẽ được ưu tiên cao hơn.

Lợi ích của @Media

Sử dụng @Media, chúng tôi có thể tinh chỉnh các thiết kế responsive để chúng có thể sử dụng được nhiều hơn trên nhiều loại thiết bị. Hãy xem xét một kịch bản chung.

Trong một thời gian dài, các nhà thiết kế responsive đã xây dựng email của họ bằng cách tiếp cận chỉ dành cho máy tính để bàn. Email sử dụng chiều rộng bảng cố định và mọi thứ được tối ưu hóa để trông đẹp mắt trên máy tính để bàn và ứng dụng email trên web. Tuy nhiên, khi xem trên thiết bị di động, thiết kế bị phá vỡ: email được phóng to cho vừa vặn, làm cho văn bản và các nút quá nhỏ so với tab; bố cục bị hỏng và không sử dụng được; hoặc phần bên phải của email bị ẩn khỏi chế độ xem, làm cho việc cuộn theo chiều ngang là cần thiết.

Trước khi sử dụng các @Media, người thiết kế có thể làm rất ít để khắc phục những vấn đề này. Giờ đây, chúng tôi có thể sử dụng các @Media để nhắm mục tiêu các thiết bị di động và điều chỉnh phong cách của mình cho phù hợp.

Tổng Kết

Trong bài viết này, chúng ta đã được tìm hiểu về chức năng và nhiệm vụ của truy vấn @media trong CSS. Mặc dù trên thế giới thường ưa chuộng mô hình “Mobile First”, nhưng từ kinh nghiệm cá nhân của tôi, tôi luôn ưu tiên mô hình “PC First”. Lý do là vì nó phản ánh tốt hơn trải nghiệm người dùng khi họ duyệt web từ màn hình lớn xuống màn hình nhỏ. Hy vọng rằng thông qua bài viết này, bạn đã có cái nhìn tổng quan về cách sử dụng truy vấn @media trong CSS để tạo ra các trang web responsive.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now