[CSS Căn bản] Responsive sử dụng truy vấn media trong CSS

Cập nhật lần cuối: 01 Tháng Tư 2018

CSS cơ bản

3,047 Lượt xem

Responsive là một tính năng phổ biến trên các website hiện đại ngày nay (. Khi CSS3 ra mắt, tính năng truy vấn media (Media Query) cũng được giới thiệu, đây là tính năng xác định vùng css sẽ được thực thi dựa theo kích thước màng hình được khai báo trong media. Trong bài viết này mình sẽ chia sẻ với bạn cách sử dụng truy vấn media trong CSS để tạo ra một website responsive tốt nhất.

Responsite là gì?, truy vấn media là gì ?

Responsite là từ dùng để chỉ khả năng tương thích với mọi kích thước trình duyệt của website. Ví dụ, cũng cùng một thẻ <div> nhưng trên màng hình laptop nó có độ rộng là 1000px, trên máy tính bảng là 700px và trên di động là 400px. Để làm được điều này bạn không cần phải lập trình hay css phức tạp, tính năng truy vấn media trong css sẽ giúp bạn làm tốt điều này một cách đơn giản. Vậy truy vấn media là gì?

Truy vấn media là một kỹ thuật mới trong CSS3, Chúng ta sử dụng các truy vấn media để tạo ra các điểm ngắt (breakpoint). Mỗi điểm ngắt sẽ đại diện cho một khoảng kích thước được khai báo trong media. Khi kích thước của trình duyệt nằm trong khoảng kích thước đã được khai báo trong media thì các css trong điểm ngắt sẽ được ưu tiên thực thi.

Sử dụng các điểm ngắt để thực thi những css phù hợp

Sử dụng truy vấn media trong CSS để tạo giao diện responsive

Truy vấn media không khó sử dụng, Mặc dù có nhiều media_type và media_feature, tuy nhiên để có được giao diện respinsive bạn chỉ cần dùng một vài cái là đủ. Cú pháp của truy vấn media như sau:

@media not|only media_type and (media_feature) {
    CSS-Code;
}

not|only: là trừ loại media đó ra hoặc là chỉ áp dụng cho loại media đó thôi.
media_type: là loại media áp dụng, thường có all, print, screen, speech,.. phổ biến chỉ dụng screen.
media_feature: giá trị kích thước media như: max-width, min-width, min-device-width, max-device-width,..
Có nhiều media_type và media_feature, nhưng ở mức cơ bản nên mình sẽ không liệt kê hết ở đây.
Khi sử dụng media_feature thì bạn phải khai báo viewport với cú pháp: <meta name="viewport" content="width=device-width, initial-scale=1.0">trong thẻ <head> nhé.

Một số ví dụ sử dụng media để thiết lập responsive.

@media only screen and (max-width: 980px){
 .logo{
    witdh:20%
  }
}

Đoạn trên sẽ thực thi khi độ rộng kích thước viewport nằm trong khoảng từ 980px trở xuống.

@media only screen and (max-width: 580px) and (min-width: 320px){
  .logo{
    witdh:50%
  }
}

Đoạn trên sẽ thực thi khi độ rộng kích thước viewport nằm trong khoảng từ 320px đến 580px.

Dưới đây là đoạn CSS media khuyến nghị sử dụng thi bạn thiết kế website responsite

/* Màng hình laptop hoặc desktop lớn*/
@media (min-width: 1200px) {
}

/* Màng hình máy tính bảng lớn hoặc máy tính màng hình trung bình */
@media (min-width: 992px) and (max-width: 1199px) {
}

/* Màng hình máy tính bảng nhỏ hoặc máy tính màng hình nhỏ */
@media (min-width: 768px) and (max-width: 991px) {
}

/* Màng hình máy tính bảng rất nhỏ hoặc điện thoại di động */
@media (max-width: 767px) {
}

/* Điện thoại di động hoặc màng hình cực nhỏ */
@media (max-width: 480px) {
}

Lưu ý: khi thiết kế website responsite, các đơn vị tính nên sử dụng đơn vị tương đối như: em, ex, ch, rem, vw, vh, vmin, vmax, %. % là đơn vị thường sử dụng nhất. Hạn chế sử dụng các đơn vị tuyệt đối như px, pc, pt, in, mm, cm.

Bài này sẽ kết thúc series học CSS Căn bản. Nếu bạn có thắc mắc có thể comment để mình trả lời nhé.

Tác giả: ĐOÀN CÔNG TUẤN

Với niềm đam mê về khoa học công nghệ thông tin, đặc biệt là lập trình. Tôi đã thành lập blog Tuandc.com để lưu trữ và chia sẻ những kiến thức thực tế có được trong quá trình làm việc. Với kinh nghiệm gần 10 năm làm việc trong lĩnh vực, những kiến thức tôi chia sẻ hy vọng sẽ giúp được phần nào đó.