Trong CSS, thuộc tính @media (media query) là công cụ mạnh mẽ giúp bạn kiểm soát giao diện website theo từng loại thiết bị hoặc kích thước màn hình khác nhau. Với sự phát triển của các thiết bị di động, máy tính bảng, và màn hình lớn, việc sử dụng @media là một phương pháp quan trọng trong thiết kế web đáp ứng (responsive design).
Dưới đây là bốn loại thuộc tính @media phổ biến trong CSS mà bạn nên biết.
@media screen@media screen được sử dụng để áp dụng các quy tắc CSS cho các thiết bị có màn hình hiển thị, chẳng hạn như máy tính, điện thoại di động, máy tính bảng. Đây là loại @media được sử dụng nhiều nhất vì hầu hết các thiết bị hiện đại đều có màn hình.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}Trong ví dụ này, khi màn hình của thiết bị có chiều rộng nhỏ hơn hoặc bằng 768px (thường là kích thước màn hình máy tính bảng hoặc điện thoại di động), màu nền của trang web sẽ chuyển sang màu lightblue.
@media print@media print được sử dụng khi in ấn. Các quy tắc CSS bên trong loại media này sẽ chỉ áp dụng khi tài liệu hoặc trang web được in ra. Điều này giúp tối ưu hóa giao diện khi người dùng muốn in nội dung từ trang web, chẳng hạn ẩn các phần không cần thiết như hình ảnh, quảng cáo.
@media print {
body {
background-color: white;
font-size: 12pt;
}
.no-print {
display: none;
}
}Trong ví dụ trên:
.no-print sẽ bị ẩn đi, tránh hiển thị các nội dung không cần thiết.@media all@media all áp dụng cho tất cả các thiết bị và kiểu media, bao gồm cả màn hình, in ấn, và các phương tiện khác. Điều này có nghĩa là các quy tắc CSS bên trong @media all sẽ ảnh hưởng đến mọi loại thiết bị, bất kể là màn hình máy tính, điện thoại di động, hoặc máy in.
@media all and (min-width: 1024px) {
.container {
width: 80%;
}
}Trong ví dụ này, nếu thiết bị có chiều rộng màn hình lớn hơn 1024px, phần tử .container sẽ có chiều rộng là 80% của màn hình.
@media only@media only là một cách để áp dụng quy tắc CSS chỉ cho các thiết bị cụ thể. Thuộc tính này hạn chế trình duyệt cũ không hỗ trợ @media (ví dụ: một số trình duyệt di động đời cũ) khỏi việc áp dụng các quy tắc không phù hợp.
@media only screen and (max-width: 600px) {
.header {
font-size: 18px;
}
}Ví dụ này chỉ áp dụng quy tắc cho màn hình có chiều rộng tối đa là 600px, thường là các thiết bị di động. Kích thước font của phần tử .header sẽ là 18px khi được hiển thị trên các thiết bị nhỏ.
@media sẽ áp dụng đúng quy tắc CSS.@mediaNgoài các loại chính trên, thuộc tính @media còn có thể kết hợp với nhiều điều kiện bổ sung để tăng tính linh hoạt cho giao diện.
min-width và max-width: Điều chỉnh CSS dựa trên chiều rộng màn hình.min-height và max-height: Điều chỉnh CSS dựa trên chiều cao màn hình.orientation: Kiểm soát hiển thị dựa trên chế độ màn hình ngang (landscape) hoặc dọc (portrait).@media screen and (min-width: 768px) and (orientation: landscape) {
body {
background-color: lightgreen;
}
}Trong ví dụ này, khi màn hình có chiều rộng tối thiểu là 768px và ở chế độ ngang, màu nền sẽ thay đổi thành màu lightgreen.
Thuộc tính @media trong CSS là công cụ mạnh mẽ để thiết kế giao diện web linh hoạt, thân thiện với nhiều thiết bị khác nhau. Bằng cách nắm vững các loại @media như screen, print, all, và only, bạn có thể kiểm soát và tùy chỉnh giao diện sao cho phù hợp với mọi kích thước màn hình, đảm bảo trải nghiệm người dùng tốt nhất.
