如何根据浏览器高度调整按钮的padding值

当然可以用CSS实现！你现在用的padding: 4%;其实是基于按钮所在包含块的宽度计算的，这就是为啥它不会跟着窗口高度变化。不过咱们有几个简单又靠谱的办法来解决这个问题：

方法一：直接使用视口高度单位（vh） #

vh是CSS里专门针对视口高度的单位，1vh就等于浏览器窗口高度的1%。把padding改成vh单位后，内边距就会自动跟着窗口高度变化了：

.btn {
  /* 上下用2vh，左右可以用vw（视口宽度单位）或者也用vh，按需调整数值 */
  padding: 2vh 4vw;
}

举个例子：如果浏览器窗口高度是800px，1vh就是8px，那2vh就是16px；窗口高度缩小到500px时，2vh就变成10px，完全自动适配。要是想让上下左右的padding都随高度变化，直接写padding: 3vh;就行。

方法二：用clamp()限制padding的极端值 #

如果担心窗口特别高或特别矮时，padding会变得太夸张（比如小屏幕上按钮padding太大挤得内容放不下），可以用clamp()函数给padding设置一个合理的范围：

.btn {
  /* 最小值8px，理想值2.5vh，最大值24px */
  padding: clamp(8px, 2.5vh, 24px);
}

这个写法的逻辑是：当2.5vh小于8px时，用8px保证小屏幕上的可用性；当2.5vh大于24px时，用24px避免大屏幕上padding过大；中间的情况就用2.5vh自适应高度，兼顾了灵活性和实用性。

小提醒 #

• 要是想兼顾不同屏幕比例的体验，可以混合使用vh和vw单位，比如上下内边距用vh，左右用vw，让按钮在横竖屏切换时都保持舒服的比例。
• 调整数值的时候可以多测试几种窗口高度，确保按钮在各种场景下都不会变形或者影响点击。

内容的提问来源于stack exchange，提问作者wokoro douye samuel