Media query CSS: Tham khảo và hướng dẫn nhanh
Media query cung cấp cho ta một cách rất hiệu quả để điều chỉnh kiểu của bạn theo các yếu tố như loại thiết bị được sử dụng, kích thước khung nhìn, mật độ điểm ảnh của màn hình hoặc thậm chí là hướng thiết bị. Vì các media query đã xuất hiện khá lâu, bạn có thể đã quen với cú pháp và cách sử dụng cơ bản. Do đó, bài đăng này nhằm mục đích trở thành một điểm tham khảo nhanh tốt và hy vọng bạn cũng sẽ khám phá ra một vài thủ thuật mà bạn không biết có thể thực hiện được.
Media query cơ bản
Media query được xác định bằng cách sử dụng @media at-rule, theo sau là loại phương tiện, 0 hoặc nhiều tính năng phương tiện hoặc cả loại phương tiện và (các) tính năng phương tiện. Tất cả các loại phương tiện có sẵn là tất cả , in , màn hình và giọng nói , và khi không được chỉ định thì tất cả đều được ngụ ý. Nhiều loại phương tiện được dùng cùng một lúc và chúng phải được phân tách bằng dấu phẩy:
@media screen, print {
/* Styles for screen and print devices */
}
Các loại phương tiện như tv hoặc chiếu đã không còn được dùng nữa với Media query cấp 4.
Đối với các tính năng phương tiện, chúng được xác định trong ngoặc đơn và có thể kiểm tra một loạt các tính năng. Một số tính năng phổ biến nhất là chiều rộng , chiều cao , tỷ lệ khung hình , hướng và độ phân giải . Nhiều tính năng phổ biến này là các tính năng phạm vi, vì vậy chúng cũng có sẵn version tối thiểu và tối đa (ví dụ: chiều rộng tối thiểu , chiều rộng tối đa , tỷ lệ khung hình tối thiểu , tỷ lệ khung hình tối đa ,…)
Trong ví dụ đơn giản sau, màu nền mặc định là hotpink , nhưng các thiết bị màn hình có chiều rộng khung nhìn 650px trở xuống sẽ có màu nền là rebeccapurple thay thế:
body {
background: hotpink;
}
@media screen and (max-width: 650px) {
body {
background: rebeccapurple;
}
}
Lưu ý khi chỉ định cả loại phương tiện và tính năng phương tiện, ta cần sử dụng toán tử và logic giữa chúng.
Dưới đây là một số ví dụ khác về các media query đơn giản chỉ định loại phương tiện, tính năng phương tiện hoặc cả hai:
@media print {
/* styles for print media only */
}
@media (max-width: 65rem) {
/* styles for any device that has a display width of 65rem or less */
}
@media screen and (min-width: 800px) {
/* styles for screen viewports that have a width of 800px or more */
}
Nhiều tính năng đa phương tiện
Bạn có thể chỉ định nhiều yêu cầu tính năng đa phương tiện để đáp ứng media query sử dụng toán tử và logic giữa các tính năng. Khi sử dụng và , truy vấn sẽ chỉ khớp nếu tất cả các tính năng đánh giá là true. Ví dụ: rất phổ biến khi có các bố cục điều chỉnh theo một số phạm vi chiều rộng khung nhìn khác nhau:
/* Extra-small */
@media screen and (max-width: 360px) {
/* ... */
}
/* Small */
@media screen and (min-width: 361px) and (max-width: 480px) {
/* ... */
}
/* Medium-only */
@media screen and (min-width: 481px) and (max-width: 960px) {
/* ... */
}
/* ... */
Hoặc toán tử logic sử dụng dấu phẩy
Bạn có thể xác định nhiều truy vấn được phân tách bằng dấu phẩy, trong trường hợp đó, dấu phẩy đóng role là toán tử hoặc lôgic và truy vấn trở thành danh sách các truy vấn. Media query sẽ áp dụng nếu bất kỳ truy vấn nào được phân tách bằng dấu phẩy phù hợp.
Trong ví dụ sau, media query truyền thông sẽ đúng nếu thiết bị có một định hướng của bức chân dung hoặc nếu viewport của thiết bị có một min-width của 3rem và một khía cạnh-tỷ lệ-max của 2/1:
@media (orientation: portrait), (min-width: 3rem) and (max-aspect-ratio: 2/1) {
/* ... */
}
Không phải toán tử logic
Bạn có thể sử dụng toán tử không logic ở đầu truy vấn để chuyển đổi tính xác thực của toàn bộ truy vấn. Toán tử not hữu ích để áp dụng các kiểu khi trình duyệt hoặc thiết bị không đáp ứng các điều kiện nhất định. Trong ví dụ sau, media query sẽ áp dụng khi thiết bị trỏ chính không thể di chuột qua các phần tử:
@media not screen and (hover: hover) {
/* ... */
}
Lưu ý với không phải loại phương tiện không phải là tùy chọn. Ngoài ra, không phải không phủ định toàn bộ danh sách truy vấn (các truy vấn được phân tách bằng dấu phẩy), nhưng chỉ một truy vấn.
Chỉ toán tử logic
Toán tử logic duy nhất hơi đặc biệt một chút và ẩn toàn bộ truy vấn đối với các trình duyệt cũ hơn. Nói cách khác, các trình duyệt cũ hơn không hiểu từ khóa duy nhất nên toàn bộ media query bị bỏ qua. Nếu không chỉ không có hiệu lực:
@media only all and (min-width: 320px) and (max-width: 480px) {
/* ignored by older browsers */
}
Đối với toán tử not , loại phương tiện không phải là tùy chọn khi chỉ sử dụng. Lưu ý các trình duyệt cũ không hỗ trợ Media query cấp 3 hiện nay rất hiếm nên trong hầu hết các trường hợp, việc sử dụng chỉ là không cần thiết.
Bổ sung từ Truy vấn Phương tiện Cấp 4
Phiên bản mới nhất của đặc tả media query (cấp 4) chỉ định khá nhiều tính năng phương tiện mới có thể được kiểm tra:
- con trỏ : Nếu có thiết bị trỏ chính ( không có , thô hoặc tốt ).
- bất kỳ con trỏ nào : Nếu có bất kỳ thiết bị trỏ nào khả dụng ( không có , thô hoặc tốt ).
- di chuột : Thiết bị trỏ chính có thể di chuột trên các phần tử ( không có hoặc di chuột ).
- any-hover : Bất kỳ thiết bị trỏ nào có sẵn có thể di chuột trên các phần tử ( không hoặc di chuột ).
- color-gamut : Phạm vi màu có sẵn ( srgb , p3 hoặc rec2020 ).
- tràn nội tuyến : Cách xử lý tràn tiềm năng trên trục nội tuyến ( không có , phân trang , phân trang tùy chọn hoặc cuộn ).
- khối tràn : Cách xử lý tràn tiềm năng trên trục khối ( không có , phân trang , phân trang tùy chọn hoặc cuộn ).
- cập nhật : Bố cục có thể được cập nhật ở tần suất nào ( không , chậm hay nhanh ).
Media query cho màn hình Retina
Trong vài năm qua, ta đã bắt đầu thấy sự gia tăng của các thiết bị có màn hình có mật độ điểm ảnh cao hơn. Có thể hữu ích khi tạo kiểu khác biệt cho các khía cạnh nhất định trong thiết kế của bạn cho các thiết bị có mật độ pixel cao hơn này. Một ví dụ điển hình là cung cấp version đồ họa nhất định có độ phân giải cao.
Ta có thể thực hiện điều này bằng cách sử dụng tính năng media độ phân giải tối thiểu với giá trị 192dpi. Tuy nhiên, tính năng độ phân giải không nhất thiết phải được hỗ trợ trên tất cả các trình duyệt và để có một cách tiếp cận dễ hiểu hơn, ta cũng có thể thêm một tính năng bổ sung -webkit-min-device-pixel-ratio bổ sung với giá trị là 2:
@media screen and
(min-resolution: 192dpi),
(-webkit-min-device-pixel-ratio: 2) {
/* ... */
}
Bạn có thể theo dõi sự hỗ trợ của trình duyệt hiện tại cho tính năng phương tiện phân giải trên Tôi có thể sử dụng .
Tài nguyên
Dưới đây là một số tài nguyên rất hữu ích liên quan đến media query :
- CSS-Tricks ' Media Queries for Standard Devices .
- MQTest.io , để kiểm tra tính năng phương tiện nào mà thiết bị của bạn đáp ứng.
- Tài liệu tham khảo của MDN về các tính năng phương tiện có sẵn .
Các tin liên quan
Mẹo CSS: Bóng đổ nhiều màu & cắt bỏ2018-04-02
Cách hiện đại để xử lý CSS trong React
2018-02-22
CSS-in-JS Roundup: Tạo kiểu cho các thành phần React
2017-08-21
Đặt lại CSS tối thiểu
2017-06-21
Hàm CSS color-mod
2017-01-12
CSS Grid: Holy Grail Layout
2016-12-28
Bố cục lưới CSS: Ký hiệu lặp lại
2016-12-23
Bố cục lưới CSS: Từ khóa Span
2016-12-21
Bố cục lưới CSS: Giới thiệu
2016-12-15
Tạo kiểu văn bản giữ chỗ bằng CSS
2016-12-10
