使用相对单位和媒体查询实现按钮响应式，通过rem、em、%或vw设置尺寸，并结合@media调整不同屏幕下的字体与间距，确保适配各类设备。
要实现按钮大小随屏幕尺寸变化的响应式效果，核心是使用相对单位和媒体查询，让按钮在不同设备上都能良好显示。
使用相对单位定义按钮尺寸
避免使用固定像素值（如 px），改用相对单位如 em、rem 或 %，这样按钮能根据字体大小或容器宽度自动调整。
- rem：相对于根元素字体大小，适合统一控制整体比例
- em：相对于父元素字体大小，适合局部缩放
- %：相对于父容器宽度，适合宽度自适应
button {
font-size: 1rem;
padding: 0.5em 1em;
width: 100%;
max-width: 200px;
margin: 0 auto;
}
结合媒体查询调整不同屏幕下的样式
通过 @media 查询，在不同屏幕宽度下设置按钮的字体、内边距或最大宽度。
示例：
button {
font-size: 1rem;
padding: 0.5em 1em;
}
@media (max-width: 768px) {
button {
font-size: 0.875rem;
padding: 0.4em 0.8em;
}
}
@media (max-width: 480px) {
button {
font-size: 0.75rem;
padding: 0.3em 0.6em;
}
}
使用视口单位实现动态缩放
利用 vw（视口宽度单位）可以让按钮尺寸与屏幕宽度成比例。
立即学习“前端免费学习笔记（深入）”；
注意：需设定最小值，防止在极小屏幕上过小。
button {
font-size: calc(16px + 0.5vw);
padding: 0.5em 1em;
min-width: 100px;
}
基本上就这些方法，合理搭配相对单位和断点控制，按钮就能自然适配各种设备。 
