手机等小屏幕设备通常具有触摸屏。笔记本电脑和台式机等大屏设备通常会附带鼠标或触控板等硬件。我们往往倾向于将小屏幕与触摸屏结合，将大屏幕与指针划为一体。
但实际情况却更加细微。某些笔记本电脑具有触摸屏功能。用户可以与触摸屏和/或触控板互动。同样，您也可以将外接键盘或鼠标与平板电脑等触摸屏设备搭配使用。
使用 CSS 中的媒体功能，而不是尝试根据屏幕尺寸推断输入机制。
指针
您可以使用 pointer 媒体功能测试三个可能的值：none、coarse 和 fine。
如果浏览器报告的 pointer 值为 none，则表示用户可能是在使用键盘与您的网站互动。
如果浏览器报告的 pointer 值为 coarse，则表示主要输入机制不是非常准确。触摸屏上的手指是一种粗指的指针。
如果浏览器报告的 pointer 值为 fine，则表示主要输入机制能够进行精细控制。鼠标或触控笔是一种不错的指针。
您可以调整界面元素的大小，以符合 pointer 值。请尝试在不同类型的设备上访问此网站，了解界面是如何调整的。
在此示例中，我们放大了粗指针的按钮：
button {
padding: 0.5em 1em;
}
@media (pointer: coarse) {
button {
padding: 1em 2em;
}
}
也可以针对精细指针减小元素，但请谨慎执行此操作：
@media (pointer: fine) {
button {
padding: 0.25em 0.5em;
}
}
即使用户拥有能够进行精细控制的主要输入机制，也在缩减互动元素的大小前也要三思而后行。Fitts 定律仍然适用。目标越小，需要更集中的注意力，即使指针很精细也是如此。更大的目标区域对所有人都有利，无论使用何种指控设备。
任意指针
pointer 媒体功能可报告主要输入机制的精细度。但是，许多设备都有多种输入机制。用户可能会同时使用触摸屏和鼠标与您的网站进行互动。
any-pointer 与 pointer 媒体功能的不同之处在于，它会报告是否有指控设备通过测试。
any-pointer 值为 none 表示没有可用的指控设备。
any-pointer 值为 coarse 表示至少有一个指控设备不是非常准确。但这可能不是主要的输入机制。
any-pointer 值为 fine 表示至少有一个指控设备能够进行精细控制。同样，这种机制可能不是主要的输入机制。
由于如果任一输入机制通过测试，any-pointer 媒体查询会报告阳性结果，因此浏览器可能会报告 any-pointer: fine 的结果，同时报告 any-pointer: coarse 的结果。在这种情况下，媒体查询的顺序很重要。以后者为准。
在此示例中，如果设备同时具有精确和粗略输入机制，则会应用粗略样式。
@media (any-pointer: fine) {
button {
padding: 0.5em 1em;
}
}
@media (any-pointer: coarse) {
button {
padding: 1em 2em;
}
}
悬停
hover 媒体功能会报告主要输入机制是否可以悬停在元素上。这通常意味着屏幕上的某种光标由鼠标或触控板控制。
与区分细指针和粗指针的 pointer 媒体功能不同，hover 媒体功能是二进制功能。如果主要输入设备能够将鼠标悬停在元素上，则会报告 hover 值。否则，值为 none。
在此示例中，一些辅助图标在用户悬停鼠标时可用，但前提是主要输入设备能够悬停在某个元素上。
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:hover .extra {
visibility: visible;
}
}
如果将鼠标悬停在该按钮上，就会显示此图标。但是，如果您使用键盘通过 Tab 键转到该按钮，该图标将保持不可见状态。使用键盘时，您的焦点是焦点，而不是悬停。外接鼠标的桌面设备会报告主要输入机制能够悬停，事实也是如此。但是，任何人在连接了鼠标的情况下使用键盘都无法受益于 :hover 样式。因此，最好结合使用 :hover 和 :focus 样式来涵盖这两种互动。
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:is(:hover, :focus) .extra {
visibility: visible;
}
}
即使主要输入设备能够将鼠标悬停在元素上，也请注意在悬停互动后隐藏信息。这类信息的曝光度会降低。请勿使用悬停功能隐藏重要信息或重要界面元素。
任意悬停
hover 媒体查询仅报告主要输入机制。某些设备具有多种输入机制：触摸屏、鼠标、键盘和触控板。
就像 any-pointer 报告任何输入机制一样，如果任何可用的输入机制能够悬停在元素上，则 any-hover 将为 true。
如果您决定反转上一个示例中的逻辑，则可以将悬停样式设为默认样式，然后在 any-hover 的值为 none 时将其移除。
button .extra {
visibility: hidden;
}
button:hover .extra,
button:focus .extra {
visibility: visible;
}
@media (any-hover: none) {
button .extra {
visibility: visible;
}
}
在没有能够悬停的输入机制的设备上，额外图标始终可见。
虚拟键盘
用户会使用光标和手指来探索界面，但在输入信息时，他们需要使用键盘。如果用户的设备连接了物理键盘，这没关系，但如果他们使用的是触摸屏设备，则情况会比较复杂。这些设备提供屏幕虚拟键盘。
输入类型
与物理键盘不同，虚拟键盘可以进行自定义，以匹配预期输入。如果您提供与预期输入有关的信息，设备便可提供最合适的虚拟键盘。
HTML5 输入类型是描述 input 元素的好方法。type 属性接受 email、number、tel、url 等值。
<label for="email">Email</label>
<input type="email" id="email">
<label for="number">Number</label>
<input type="number" id="number">
<label for="tel">Tel</label>
<input type="tel" id="tel">
<label for="url">URL</label>
<input type="url" id="url">
输入法
通过 inputmode 属性，可以对虚拟键盘进行精细控制。例如，尽管有一个 input type 的值为 number，但您可以使用 inputmode 属性来区分整数和小数。
如果您要请求的是整数（例如某人的年龄），请使用 inputmode="numeric"。
<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">
如果您想输入包含小数位的数字（例如价格），请使用 inputmode="decimal"。
<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">
自动补全
没有人喜欢填写表单。作为广告设计人员，您可以允许用户自动填写表单字段，从而提升用户体验。autocomplete 属性提供了多种用于改进联系表单、登录表单和结账表单的选项。
<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">
<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">
<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">
这些 HTML 属性（type、inputmode 和 autocomplete）虽然只是对您的表单字段的补充，但会给用户体验带来巨大变化。通过预测并响应用户的设备功能，您可以为用户提供帮助。如需更深入的信息，有一门课程专门帮助您学习表单。
在本课程的接下来，我们将介绍一些常见的接口模式。
检查您的掌握程度
考查你对互动知识的掌握情况
您应该使用哪项功能，而不是尝试根据屏幕尺寸推断用户的输入类型？
@media (pointer: coarse)或@media (-any-pointer: coarse)类似prompt() 询问用户handheld@media (pointer) 和 @media (any-pointer) 有什么区别？
any-pointer 会向所有设备输入类型查询任何匹配项。哪种输入类型会向用户显示更合适的虚拟键盘？
type="url"type="tel"type="number"type="email"