# expandableArea

back

您是否曾经尝试单击或点击某个元素（例如，按钮，链接），并且意识到只有单击该元素的特定区域，它才会响应？

# 用户体验注意事项

back

WCAG准则
根据WCAG 2.1，触摸或鼠标的最小目标尺寸应为 44×44 像素。大小不是固定的，可能会根据使用情况而改变。但是，44×44 像素是一个很好的起点
菲茨定律
UX设计中要遵循的重要定律。简而言之，触摸或点击目标越大，越接近，则需要用户与其进行交互的时间越短。

# 按钮

back

让按钮看起来可以点击（cursor: pointer）
使其变大，这样很容易被注意到（菲茨定律）

# 链接

back

<nav>
  <ul>
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><nav href="#">Products</nav></li>
    <li class="nav-item"><a href="#">Store</a></li>
    <li class="nav-item"><a href="#">Team</a></li>
  </ul>
</nav>

.nav-item {
  padding: 12px 16px;
}

1
2
3
4
5
6
7
8
9
10
11
12

据上述 HTML 和 CSS，可点击区域将仅为文本.
正确的方法是在链接本身上添加填充。请注意，顶部和底部填充默认为行内元素，因此默认情况下不起作用。无论是哪种情况，它都可以是 block 或 inline-element 或 flex

.nav-item a {
  display: block;
  padding: 12px 16px;
}

1
2
3
4

# 汉堡菜单

back

# 复选框和单选按钮

back

在 HTML 中，您可以使用 for 属性将标签与输入绑定。

<input type="checkbox" id="option1">
<label for="option1">Option 1</label>

1
2

或者您可以将输入内容放置在标签内：

<label for="option1">
  Option 1
  <input type="checkbox" id="option1">
</label>

1
2
3
4

# 侧边栏

back

# 使用伪元素增加可点击区域

back

伪元素属于其父元素，因此当我们创建具有特定宽度和高度的伪元素时，它将充当其父元素的单击/触摸/悬停区域

.menu-2:after {
  content: "";
  position: absolute;
  left: 55px;
  top: 0;
  width: 50px;
  height: 50px;
  background: #e83474;
  /*Other styles*/
}

1
2
3
4
5
6
7
8
9
10