Question

我目前正在使用react进行一个宠物网站项目，并且我使用的容器是16：9，并使用当前视口缩放。这个想法是基于一支笔，我是用Vanilla JS（https://codepen.io/AllBitsEqual/pen/PgMrgm）创建的，它已经像一种魅力一样工作了。

function adjustScreen() {...}
adjustScreen()

[...]

const resizeHandler = function () { adjustScreen() }

window.addEventListener('resize', helpers.debounce(resizeHandler, 250, this))

我现在已经编写了一个脚本，该脚本位于App.jsx中，它通过useEffect进行自身绑定（取消绑定），并计算视口的当前大小以调整容器，只要视口发生变化（出于性能考虑）。我还使用媒体查询来调整容器中元素的大小和字体大小，这虽然可以，但是使用起来并不有趣。

我想扩展这个想法，并在计算当前容器大小的同一函数中更改HTML元素的字体大小，以便我可以使用REM根据我计算出的根字体大小来缩放字体大小和其他元素

是否存在通过样式标签或样式属性通过ReactJS更改标签的字体大小样式的有效且面向未来的方法？

Answer 1

就目前而言，我一直使用“ document.documentElement”和“ style.fontSize”来实现所需的功能，但我不是100％地确定这是最好的解决方案。在我接受自己的最佳答案之前，我将看看是否可以找到或获得更好的解决方案。

我将useState用于游戏尺寸，并在useEffect中，将侦听器附加到调整大小的事件，出于性能原因，我对此进行了一些限制。

with open('game.txt', 'r') as f:
    l = [[int(num) for num in line.split(',')] for line in f]
print(l)

设置React的fontSize以在响应式设计中使用REM

1 个答案: