如何通过CSS修改标准resize手柄的尺寸？

我太懂这种抓狂的感觉了！手机上那个迷你resize手柄真的要凑到屏幕跟前放大才能精准拖动，桌面端又显得有点扎眼。你尝试的::-webkit-resizer其实找对了方向，只是被浏览器的默认样式盖过去了，咱们调整下代码就能搞定：

首先，修改你的CSS，强制覆盖默认样式，同时优化触控体验：

div {
  border: 2px solid;
  padding: 20px;
  width: 300px;
  resize: both;
  overflow: auto;
  /* 给容器底部加内边距，避免手柄被内容遮挡 */
  padding-bottom: 35px;
  /* 给容器加相对定位，让手柄的绝对定位生效 */
  position: relative;
}

/* 针对WebKit内核浏览器（Chrome、Edge等） */
#r::-webkit-resizer {
  /* 清除所有默认样式，避免和自定义样式冲突 */
  all: unset;
  border: 2px solid #000;
  background: #ff4444;
  width: 25px;
  height: 25px;
  /* 固定在容器右下角 */
  position: absolute;
  bottom: 5px;
  right: 5px;
  /* 设置鼠标/触控指针样式 */
  cursor: se-resize;
  /* 禁用浏览器默认触控手势，提升移动端拖拽流畅度 */
  touch-action: none;
  /* 加个阴影让手柄更显眼 */
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

/* Firefox 兼容性处理 */
#r::-moz-resizer {
  border: 2px solid #000;
  background: #ff4444;
  width: 25px;
  height: 25px;
}

再用媒体查询分别适配移动端和桌面端的尺寸需求：

/* 移动端放大手柄，方便触控操作 */
@media (max-width: 768px) {
  #r::-webkit-resizer {
    width: 35px;
    height: 35px;
    bottom: 8px;
    right: 8px;
  }
  #r::-moz-resizer {
    width: 35px;
    height: 35px;
  }
}

/* 桌面端缩小手柄，避免视觉突兀 */
@media (min-width: 769px) {
  #r::-webkit-resizer {
    width: 18px;
    height: 18px;
  }
  #r::-moz-resizer {
    width: 18px;
    height: 18px;
  }
}

关键细节说明： #

• all: unset是核心操作，它会清除浏览器给::-webkit-resizer预设的所有默认样式，让你的自定义样式完全生效
• 容器的position: relative是为了让手柄的绝对定位锚定在容器本身，而不是整个页面
• touch-action: none可以避免移动端浏览器在拖拽手柄时触发滚动、缩放等默认手势，让调整操作更顺畅
• 媒体查询的断点（768px）可以根据你的实际需求调整，这只是一个通用的移动端分界值

这样修改后，移动端的手柄会足够大，触控起来轻松精准；桌面端的尺寸也会更协调，不会显得突兀。

内容的提问来源于stack exchange，提问作者mrGadget