𝗧𝗵𝗲 𝗖𝗦𝗦 𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝗧𝗵𝗮𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝗱 𝗠𝘆 𝗗𝗲𝘀𝗶𝗴𝗻 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵 Truy vấn Media CSS đã thay đổi cách tiếp cận thiết kế của tôi
Tôi từng thiết kế website bằng cách kiểm tra kích thước màn hình.
Tôi từng nghĩ mình cần phải nhận biết người dùng đang sử dụng điện thoại hay máy tính bảng. Tôi đã thử kiểm tra xem chiều cao màn hình có lớn hơn chiều rộng hay không. Cách này chỉ kiểm tra được hướng màn hình (orientation), chứ không kiểm tra được loại thiết bị.
Tôi đã tìm thấy một cách tốt hơn. Hãy sử dụng media queries để kiểm tra cách mọi người tương tác với trang web của bạn.
Truy vấn (hover) kiểm tra xem một thiết bị có thể di chuột (hover) qua các phần tử hay không.
Sử dụng @media (hover: hover) cho các thiết bị có chuột hoặc trackpad.
Sử dụng @media (hover: none) cho các thiết bị chỉ dùng cảm ứng như điện thoại.
Điều này giúp bạn khắc phục các vấn đề về hover trên thiết bị di động. Trên điện thoại, các quy tắc hover thường không hoạt động hoặc hoạt động một cách kỳ lạ. Bạn có thể viết mã để hiển thị các nút trên di động nhưng ẩn chúng trên máy tính cho đến khi người dùng di chuột qua.
Tailwind giúp việc này trở nên dễ dàng với các arbitrary variants:
Bạn cũng có thể kiểm tra độ chính xác của con trỏ với (pointer).
• Mouse: hover và fine pointer • Trackpad: hover và fine pointer • Finger touch: không hover và coarse pointer • Stylus: thường là hover và fine pointer
Nếu bạn muốn kiểm tra mọi thiết bị đầu vào thay vì chỉ thiết bị chính, hãy sử dụng các truy vấn sau:
• @media (any-hover: hover) • @media (any-pointer: fine)
Một chiếc máy tính bảng có gắn chuột có thể báo cáo hover: none cho thiết bị đầu vào chính của nó. Nhưng nó sẽ báo cáo any-hover: hover vì có sự hiện diện của chuột.
Đừng chỉ thiết kế dựa trên kích thước màn hình nữa. Hãy bắt đầu thiết kế dựa trên cách người dùng chạm hoặc nhấp vào giao diện của bạn.