Giới thiệu về Media CSS trong Responsive

Bài đăng này đã không được cập nhật trong 7 năm

Quy tắc @media cho phép tạo kiểu có điều kiện của các phần tử.

Các điều kiện 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.

Kết hợp truy vấn truyền thông với bố cục chất lỏng và hình ảnh linh hoạt, cho phép triển khai thiết kế web đáp ứng.

Trong bài này, sẽ xem xét cách các truy vấn @media có thể được sử dụng để thay đổi kiểu dáng trang web dựa trên truy vấn thông tin về thiết bị và hai cách tiếp cận để giải quyết bố cục trang trong thiết kế đáp ứng.

1. Media CSS là gì?

Media CSS là một "công nghệ" được giới thiệu trong Css3. Nguyên tắc nó sử dụng trên thông qua các thông số kích thước màn hình được khai báo thông qua @media Với công cụ này chúng ta có thể phân đoạn Css chúng ta ra nhiều phần khác nhau tương ứng với kích thước của các loại thiết bị. Thuộc tính này có cú pháp như sau:

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

Trong đó mediatype gồm các thuộc tính hay sử dụng sau:

all: Dùng cho mọi thiết bị
print: Dùng cho máy in
screen: Dùng cho máy tính và các thiết bị smart phone

Thực tế vẫn còn nhiều nữa nhưng với lập trình web thì chúng ta thường sử dụng ba thuộc tính đó thôi. Và trước khi đi vào tìm hiểu các thuộc tính thì ban phải phân biệt hai khái niệm sau:

Device: Là thiết bị sử dụng website như Laptop, Desktop, Iphone, ..
Viewport: Là kích thước hiển thị của giao diện.

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

Và media featured thì gồm các thuộc tính sau:

aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của viewport
min-aspect-ratio: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của viewport
max-aspect-ratio: Tỉ lệ tôi đa giữa chiều rộng và chiều cao của viewport
color: Số bits cho mỗi màu sắc của device
color-index: Số lượng màu sắc mà device có thể hiển thị
device-aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của device
max-device-aspect-ratio: Tỉ lệ tối đa giữa chiều rộng và chiều cao của device
min-device-aspect-ratio: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của device
device-height: Chiều cao của device
device-width: Chiều rộng của device
height: Chiều cao của viewport
width: Chiều rộng của viewport
max-width: Chiều rộng tối đa của viewport
min-width: Chiều rộng tối thiểu của viewport
max-height: Chiều cao tối đa của viewport
min-height: Chiều cao tối thiểu của viewport
min-device-width: Chiều rộng tối thiểu của device
max-device-width: Chiều rộng tối đa của device
min-device-height: Chiều cao tối thiểu của device
max-device-height: Chiều cao tối đa của device
orientation: Định hướng của khung nhìn (xoay hoặc không xoay thiết bị)
resolution: Độ phân giải của thiết bị đầu ra (sử dụng dpi hoặc dpcm)

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

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

2. Sử dụng @media để tạo Responsive Website

Ngoài max-width chúng ta còn có tham số hay được sử dụng như min-width. Vậy việc sử dụng Media query nhằm mục đích đưa ra các phân đoạn để viết Css theo độ rộng màn hình các thiết bị. Vậy bản chất của RESPONSIVE là sự kết hợp củ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>Media responsive</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ị 1 hàng dọc
Ngược lại thì hiển thị hai hàng dọc

Lúc này ta sẽ thiết lập CSS như sau:

@media only screen and (max-width: 768px){
    .left, .right{
        float: none;
        width: 100%;
    }
}

3. Sử dụng @media với các thiết bị di động và máy tính

Với danh sách các thuộc tính của @media thì ta dễ dàng phát hiện ra các thiết bị. Và sau đây là danh sách các câu query @media cho các thiết bị thông dụng.

PC first trong Rseponsive

PC first là khái niệm để chỉ tuần tự responsive giao diện từ màn hình to xuống màn hình nhỏ

Để làm việc với mô hình này chúng ta sử dụng max-width trong media query

Dưới đây là các media query điển hình mà ta 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){
    
}

Ngoài ra, nếu mình cần responsive trên nhiều thiết bị hơn thì công việc của chúng ta là cần xác định kích thước của nó và thêm vào danh sách media query kia theo thứ tự màn hình to ở trên màn hình nhỏ query ở dưới. Theo cách này thì khi một Selector trong css cần style đi qua từ màn hình to đến nhỏ sẽ được thay đổi theo thứ tự ưu tiên Trái ngược với PC First chúng ta cùng đi qua Mobile First

Mobile First trong Responsive

Tuần tự tiến trình responsive của chúng ta xuất phát từ màn hình nhỏ và xây dựng dần lên thiết bị có kích thước to

Để làm việc với mô hình này chúng ta sử dụng tham số min-width trong media query.

/*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 thì khi style Css cho cùng một đối tượng thì theo thứ tự được ưu tiên từ màn hình nhỏ đến to, càng về sau các các Css ở các query màn hình to hơn được ưu tiên hơn.

4. Lời kết

Như vậy mình đã giới thiệu xong chức năng và nhiệm vụ của query @media. Trên thế giới người ta hay sử dụng Mobile First hơn nhưng với kinh nghiệm của tôi thì PC First luôn được ưu tiên vì nó hợp với việc xử lý trải nghiệm của người dùng khi lướt web từ thiết bị to xuống nhỏ. Hy vọng qua bài này bạn sẽ có cái nhìn tổng quát về cách sử dụng @media trong CSS để tạo ra website responsive.

Tham khảo:

https://freetuts.net/

https://www.sitepoint.com/atoz-css-screencast-media-queries/