改变我设计思路的 CSS Media Query
我以前设计网站时总是通过检查屏幕尺寸来进行。
我以为我需要检测用户使用的是手机还是平板电脑。我曾尝试检查屏幕高度是否大于宽度，但这只能检查屏幕方向，无法检测设备类型。
我发现了一个更好的方法：使用 media queries 来检查用户是如何与你的网站进行交互的。
(hover) 查询用于检查设备是否可以悬停在元素上。
对于带有鼠标或触控板的设备，使用 @media (hover: hover)。
对于像手机这样的仅限触摸的设备，使用 @media (hover: none)。
这有助于你解决移动端的悬停问题。在手机上，悬停规则经常失效或表现异常。你可以编写代码，在移动端显示按钮，而在桌面端则将其隐藏，直到用户悬停时才显示。
Tailwind 通过任意变体 (arbitrary variants) 让这一切变得简单：
你还可以使用 (pointer) 来检查指针精度。
• 鼠标：hover 且 fine pointer • 触控板：hover 且 fine pointer • 手指触摸：no hover 且 coarse pointer • 手写笔：通常是 hover 且 fine pointer
如果你想检查所有输入设备，而不仅仅是主设备，请使用这些：
• @media (any-hover: hover) • @media (any-pointer: fine)
连接了鼠标的平板电脑可能会为其主要输入设备报告 hover: none。但由于存在鼠标，它会报告 any-hover: hover。
不要再只针对屏幕尺寸进行设计了。开始针对用户如何触摸或点击你的界面进行设计吧。