改变button大小时上面的字也跟着缩放
可以通过设置按钮的字体大小跟随按钮大小的变化来实现字体大小随着按钮大小的变化而自动调整。具体实现方法如下:
- 首先,设置按钮的字体大小为相对大小(如em或rem),而非固定像素大小。
button {
font-size: 1em; /* 或者 font-size: 1rem; */
}
- 接着,设置按钮的尺寸大小为相对大小(如em或rem),而非固定像素大小。
button {
font-size: 1em;
width: 10em; /* 或者 width: 10rem; */
height: 2em; /* 或者 height: 2rem; */
}
- 最后,使用CSS3中的transform属性对按钮进行缩放,同时缩放按钮的字体大小。
button {
font-size: 1em;
width: 10em;
height: 2em;
transform: scale(0.8); /* 缩放比例 */
}
- 可以通过JavaScript动态计算按钮宽度和高度,从而实现自适应大小的按钮。
var btn = document.querySelector('button');
btn.style.width = btn.offsetWidth / 2 + 'px'; // 缩小一倍
btn.style.height = btn.offsetHeight / 2 + 'px'; // 缩小一倍
原文地址: https://www.cveoy.top/t/topic/bzIg 著作权归作者所有。请勿转载和采集!