Question

是否有任何库或最佳方法可以通过在容器宽度或高度变化时更改文本的文本大小来使容器内的文本可见。

Answer 1

1）您可以使用viewport relative units使字体始终与窗口大小保持同步。

.auto-text { font-size: 5vw; }

它们确实非常强大，尤其是与css calc()函数一起使用时，但是...对于更改的内容将毫无用处。

2）您也可以使用ResizeObserver收听组件的尺寸变化。

Example，code

3）有些JS库正在调整文本大小以适合整个容器，例如：FitText

Answer 2

您可以使用媒体查询，这是一个简单的过程，可让您根据容器的大小来修改属性。

I advice you to look at this

在这些示例中，媒体查询用于整个屏幕，但是通过良好的操作，您应该能够做自己想做的事。

Answer 3

您可以使用vw或vh代替当前使用的px来根据视口宽度或视口高度自动调整字体大小

例如：

h3 {
    font-size: 6vw;
}

更改初始包含块的高度或宽度时，文本将缩放。

您可以在此处找到更多详细信息：https://drafts.csswg.org/css-values/#viewport-relative-lengths和https://www.w3schools.com/cssref/css_units.asp

Answer 4

您已经有两种CSS方法，我建议您使用JavaScript来实现。

由于没有像mousedown这样的方法，因此您可以通过mouseup和resize事件获得优势。

看例子：

const c = document.querySelector("#container");
let screenX, screenY;

c.addEventListener('mousedown', function(e) {
  const {offsetWidth, offsetHeight} = e.target;
  screenX = offsetWidth
  screenY = offsetHeight;
});

c.addEventListener('mouseup', function(e){
  const {offsetWidth, offsetHeight} = e.target;
  if(offsetWidth != screenX || offsetHeight != screenY){
    console.log('resized');
    adaptText(e.target);
  }
});

function adaptText(t){
// do your own trick
  const width = t.offsetWidth,
        height = t.offsetHeight;
  let ems = width/height;
  t.style.fontSize = `${ems}em`;
}

<textarea id="container">test</textarea>

更改文本大小以避免容器大小更改时滚动

4 个答案: