不用给我爱，不用给我钱，不用给我声誉，给我真理吧。——梭罗的《瓦尔登湖》
一般可以使用vw或者em一类的属性来适配，但如果还需要更小，就只能使用scale缩放了，例如使用js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| function scaleMemberName(memberElement: Element | null, reset: boolean) {
if (!memberElement) {
return;
}
const nameElement = memberElement.querySelector('.name');
if (!(nameElement instanceof HTMLDivElement)) {
return;
}
if (reset) {
nameElement.style.scale = String();
return;
}
const boundingBox = nameElement.getBoundingClientRect();
const actualWidth = boundingBox.width;
const scale = 84 / actualWidth;
console.log({ [`${nameElement.textContent}`]: actualWidth, scale });
if (scale >= 1) {
return;
}
nameElement.style.scale = String(scale);
}
onMounted(() => {
document
.querySelectorAll('.member')
?.forEach((d) => scaleMemberName(d, false));
});
|
效果如下：
