当您的设计在移动设备上显示时 您应确保按钮或链接等互动元素足够大， 并在周围留有足够空间 使其易于点按，而不会意外重叠到其他元素上。 这能让所有用户受益 但对有运动障碍的人来说尤其有用。
建议的最小触摸目标大小约为 48 个设备无关像素 在正确设置移动视口的网站上投放 例如，虽然一个图标的宽度和高度可能只有 24 像素， 可以使用额外的内边距将点按目标的尺寸调整为最大 48px 48x48 像素的面积约为 9 毫米 大约相当于用户手指垫面积的大小。
在该演示中，我为所有链接添加了内边距，以确保它们满足最小尺寸。
各个触摸目标之间也应间隔大约 8 像素 包括水平和垂直方向 这样，用户的手指按下一个点按目标就不会意外碰到另一个点按目标。
测试触摸目标
如果您的目标是文本，并且使用了相对值（例如 em 或 rem）来设置文本和所有内边距，
您可以使用开发者工具检查该区域的计算值是否足够大。
在以下示例中，我对文本和内边距使用了 em。
检查链接的 a，
在 Chrome 开发者工具中，切换到 Computed 窗格，以便检查该框的各个部分
看看它们可解析为哪种像素大小
在 Firefox 开发者工具中，有一个布局面板。
在该面板中，您将获得所检查元素的实际尺寸。
使用媒体查询检测触摸屏使用情况
不要简单地测试视口尺寸 小尺寸的屏幕很有可能是手机或平板电脑，而这反过来 使用触摸屏，现在还有其他更稳健的适应性方式 根据实际设备功能进行设计。
我们现在可以使用媒体查询测试一项媒体功能
设置用户的主要输入源是否为触摸屏 (pointer)；
当前检测到的输入是否任何是触摸屏 (any-pointer)。
pointer 和 any-pointer 功能将返回 fine 或 coarse。
精确指针指使用鼠标或触控板的用户
（即使该鼠标已通过蓝牙连接到手机）。
coarse 指针表示触摸屏，
该平台可以是移动设备，也可以是笔记本电脑屏幕或大屏平板电脑。
如果您要调整媒体查询中的 CSS 以增加触摸目标， 粗略指针测试可让您提高所有触摸屏用户的点按目标。 这样一来，无论设备是手机还是尺寸更大的设备，点按区域都会越大。
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
您可以详细了解指针等互动媒体功能 自适应设计基础知识一文。