要创建响应式滚动条样式，可以使用CSS的伪元素选择器和一些CSS属性。下面是一个简单的示例：
/* 创建滚动条 */
::-webkit-scrollbar {
width: 10px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background-color: #888;
}
/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}这个示例使用了WebKit浏览器引擎的伪元素选择器。其他浏览器可能使用不同的伪元素名称，如::scrollbar、::-moz-scrollbar等。
要使滚动条样式响应式，可以使用CSS媒体查询和百分比单位来调整滚动条的宽度和高度，以及滑块的大小和位置。例如：
/* 当屏幕宽度小于600像素时 */
@media screen and (max-width: 600px) {
/* 调整滚动条宽度和高度 */
::-webkit-scrollbar {
width: 5%;
height: 10px;
}
/* 调整滑块大小和位置 */
::-webkit-scrollbar-thumb {
height: 50%;
top: 25%;
}
}请注意，不是所有浏览器都支持自定义滚动条样式，因此在使用这种技术时需要进行测试。