9 Thủ thuật CSS truy vấn phương tiện truyền thông nâng cao mà bạn nên biết
Trải nghiệm hữu dụng, dễ tiếp cận là yếu tố quan trọng đối với một trang web thành công. Nếu người đọc của bạn có trải nghiệm tích cực, họ có nhiều khả năng thực hiện lời kêu gọi hành động, bao gồm cả việc mua sản phẩm. Họ cũng có nhiều khả năng quay lại hoặc giới thiệu trang web của bạn cho người khác. Kinh nghiệm là chìa khóa.
Truy vấn phương tiện cung cấp các tính năng CSS khác nhau có thể tùy chỉnh trang web của bạn. Họ cho phép bạn điều chỉnh trải nghiệm của từng người dùng dựa trên khả năng của thiết bị của họ. Tìm hiểu cách cung cấp cho người đọc của bạn trải nghiệm tốt nhất, cho dù họ đang sử dụng điện thoại hay màn hình máy tính để bàn lớn.
Mục Lục
1. Tính năng con trỏ
Các quy tắc @media có tính năng con trỏ cho phép bạn tùy chỉnh thiết kế của mình dựa trên thiết bị trỏ chính. Bạn có thể kiểm tra tính khả dụng và chất lượng.
Tính năng truy vấn phương tiện con trỏ này nhận một trong ba giá trị: không có, thô hoặc tốt. Các không ai giá trị áp dụng khi không có thiết bị trỏ. Các thô giá trị áp dụng khi thiết bị trỏ chính có mức độ chính xác giảm dần. Và tốt giá trị áp dụng khi thiết bị trỏ chính có độ chính xác cao.
Sử dụng Tính năng con trỏ
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>input[type="radio"] {
appearance: none;
border: solid;
border-color: black;
margin: 0;
}
input[type="radio"]:checked {
background: red;
}
@media (pointer: fine) {
input[type="radio"] {
width: 15px;
height: 15px;
border-radius: 20px;
border-width: 1px;
}
}
@media (pointer: coarse) {
input[type="radio"] {
width: 25px;
height: 25px;
border-radius: 20px;
border-width: 2px;
}
}
</style>
<title>Pointer</title>
</head>
<body>
<label for="options">Options to Choose From: </label>
<input type="radio" id="options" > Option One
<input type="radio" id="options" > Option Two
</body>
</html>
Đoạn mã trên tạo ra hai tùy chọn vô tuyến đầu vào, tùy chọn này sẽ khác nhau dựa trên độ chính xác của thiết bị trỏ chính của máy tính.
Máy tính có thiết bị trỏ chính chính xác (hoặc chất lượng cao) sẽ hiển thị trang web sau:
Máy tính có thiết bị chính có độ chính xác hạn chế (hoặc chất lượng thấp) sẽ hiển thị trang web sau:
Thiết bị có thiết bị trỏ chính với mức độ chính xác hạn chế có các nút radio lớn hơn. Điều này mang lại trải nghiệm người dùng tốt hơn cho những người dùng như vậy. Với tính năng con trỏ, bạn có thể đảm bảo rằng tất cả người dùng của bạn đều có trải nghiệm thú vị, bất kể thiết bị của họ là gì.
2. Tính năng con trỏ bất kỳ
Giống như tính năng con trỏ, tính năng truy vấn phương tiện con trỏ bất kỳ nhắm mục tiêu đến các thiết bị trỏ. Tuy nhiên, tính năng con trỏ bất kỳ đánh giá mọi thiết bị trỏ của máy tính. Tính năng con trỏ bất kỳ cũng sử dụng không ai, thôvà tốt các giá trị.
Sử dụng Tính năng con trỏ bất kỳ
@media (any-pointer: fine) {
input[type="radio"] {
width: 15px;
height: 15px;
border-radius: 20px;
border-width: 1px;
}
}@media (any-pointer: coarse) {
input[type="radio"] {
width: 25px;
height: 25px;
border-radius: 20px;
border-width: 2px;
}
}
Bạn có thể chỉ cần thay thế mã ở trên bằng phần truy vấn phương tiện của mã trong ví dụ về tính năng con trỏ. Đoạn mã trên hiển thị một màn hình thích hợp dựa trên chất lượng của bất kỳ thiết bị trỏ nào mà máy tính có thể có.
3. Tính năng di chuột
Tính năng truy vấn phương tiện di chuột đánh giá xem cơ chế nhập chính của thiết bị có khả năng di chuột qua các phần tử trong giao diện người dùng hay không.
Sử dụng Tính năng di chuột
/* CSS */
a{
text-decoration: none;
color: black;
}
@media (hover: hover) {
a:hover {
color: blue;
}
}
<!-- HTML -->
<a href="#"> A link element</a>
Đoạn mã trên sẽ hiển thị một yếu tố. Nó sẽ thay đổi màu (từ đen sang xanh lam) bất cứ khi nào cơ chế đầu vào chính của thiết bị (hỗ trợ di chuột) di chuột qua nó.
4. Tính năng di chuột qua bất kỳ
Các di chuột qua bất kỳ truy vấn phương tiện nhắm mục tiêu đến bất kỳ cơ chế đầu vào nào, bao gồm cả cơ chế đầu vào chính.
Sử dụng Tính năng di chuột qua bất kỳ
@media (any-hover: hover) {
a:hover {
color: blue;
}
}
Truy vấn phương tiện ở trên tạo ra hiệu ứng di chuột cho bất kỳ cơ chế đầu vào nào có khả năng di chuột qua một phần tử.
5. Tính năng độ phân giải
Tính năng truy vấn phương tiện độ phân giải tính toán số lượng pixel được hiển thị bởi một thiết bị cụ thể. Một thiết bị hiển thị nhiều pixel hơn trên mỗi inch có độ phân giải tốt hơn vì nó hiển thị hình ảnh với chi tiết hơn. Tính năng này có thể giúp nhà phát triển quyết định người dùng thiết bị nào có thể nhìn thấy các phần tử trong giao diện người dùng rõ ràng hơn.
Tính năng phân giải sử dụng phạm vi. Điều này có nghĩa là cũng như việc sử dụng nghị quyết từ khóa, bạn có thể sử dụng độ phân giải tối thiểu và Độ phân giải tối đa. Tính năng phân giải truy vấn phương tiện thuộc về kiểu dữ liệu độ phân giải. Điều này có nghĩa là tính năng độ phân giải có thể đo lường bằng một trong ba đơn vị: chấm trên inch (dpi), chấm trên cm (dpcm) hoặc chấm trên pixel (dppx).
Sử dụng Tính năng độ phân giải
/* CSS */
@media (min-resolution: 72dpi) {
p {
color: white;
background-color: blue;
}
}
<!-- HTML -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</p>
Độ phân giải thấp nhất mà một thiết bị có thể có mà hình ảnh vẫn hiển thị chất lượng là 72dpi. Vì vậy, nếu một thiết bị có độ phân giải 72dpi trở lên, nó sẽ hiển thị đầu ra sau trong trình duyệt của nó:
6. Tính năng định hướng
Chế độ xem thiết bị chỉ có thể có một trong hai hướng: Chân dung hoặc phong cảnh. Bạn cần lưu ý rằng hướng khung nhìn khác với hướng thiết bị. Nếu thiết bị sử dụng bàn phím mềm, chế độ xem của thiết bị có thể thay đổi từ dọc sang ngang trong khi bản thân thiết bị vẫn ở vị trí dọc.
Sử dụng Tính năng định hướng
/* CSS */
body{
display: flex;
}
section{
border: 2px solid blue;
padding: 3px;
margin: 3px;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}@media (orientation: portrait) {
body {
flex-direction: column;
}
}
<!-- HTML -->
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
<section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
Đoạn mã trên thay đổi bố cục của cơ sở trang web theo hướng của thiết bị.
Một thiết bị có chế độ xem ở chế độ ngang sẽ hiển thị trang web sau:
Một thiết bị có chế độ xem ở chế độ dọc sẽ hiển thị trang web sau:
7. Tính năng chiều cao
Tính năng truy vấn phương tiện chiều cao cho phép bạn chỉ định kiểu CSS dựa trên chiều cao khung nhìn trên thiết bị của người dùng. Tính năng này hỗ trợ phạm vi, vì vậy bạn cũng có thể sử dụng chiều cao tối thiểu và chiều cao tối đa từ khóa.
Sử dụng Tính năng chiều cao
/* CSS */
@media (min-height: 360px) {
p{
border: 2px dotted orangered;
}}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
Đoạn mã trên tùy chỉnh những gì người dùng nhìn thấy dựa trên chiều cao của thiết bị của họ. Người dùng có chiều cao thiết bị từ 360px trở lên sẽ thấy nội dung tương tự như trang web sau:
Các thiết bị có chiều cao dưới 360px sẽ không hiển thị đường viền xung quanh đoạn văn trên trang web.
8. Tính năng chiều rộng
Tính năng truy vấn phương tiện chiều rộng cho phép bạn tạo kiểu CSS cụ thể dựa trên chiều rộng khung nhìn trên thiết bị của người dùng. Tính năng này cũng hỗ trợ phạm vi, vì vậy bạn có tùy chọn sử dụng chiều rộng tối thiểu và chiều rộng tối đa từ khóa.
Sử dụng Tính năng chiều rộng
/* CSS */
@media (min-width: 600px) {
p{
border: 2px solid purple;
}}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
Đoạn mã trên tùy chỉnh những gì người dùng nhìn thấy dựa trên chiều rộng thiết bị của họ. Người dùng có chiều rộng thiết bị từ 600px trở lên sẽ thấy trang web giống như sau:
Sử dụng các truy vấn phương tiện dựa trên chiều rộng và chiều cao có thể là một chiến lược hiệu quả trong việc làm cho trang web của bạn trở nên phản hồi nhanh.
9. Tính năng màu sắc
Tính năng truy vấn phương tiện màu đánh giá thành phần màu của thiết bị (đỏ, lục, lam). Giá trị đề cập đến số lượng bit mà một màn hình sử dụng cho mỗi thành phần, xác định số lượng màu sắc khác nhau mà nó có thể hiển thị. Các thiết bị hiện đại thường sử dụng màn hình 24 bit sử dụng tám bit cho mỗi thành phần màu. Nó cũng nhận một giá trị số nguyên, trong đó thiết bị không màu là 0.
Tính năng màu cũng sử dụng màu tối thiểu và màu tối đa các dãy.
Sử dụng Tính năng màu
/* CSS */
@media (min-color: 7) {
p{
border: 2px solid green;
}}
<!-- HTML -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
Các thiết bị có thành phần màu từ bảy trở lên sẽ hiển thị kết quả đầu ra sau trong trình duyệt của chúng:
Bây giờ bạn có thể tạo trải nghiệm người dùng duy nhất
Bạn sẽ có thể sử dụng các truy vấn phương tiện nâng cao này để nâng cao trải nghiệm của từng người dùng truy cập trang web hoặc ứng dụng của bạn. Điều quan trọng là cung cấp cho người dùng thiết bị di động và người dùng máy tính để bàn một trải nghiệm tích cực như nhau trên trang web của bạn.
Truy vấn phương tiện không phải là công cụ CSS duy nhất có thể củng cố kỹ năng nhà phát triển của bạn.
Đọc tiếp
Thông tin về các Tác giả
