在 React 中设置 <html> 的 fontSize 以在响应式设计中使用 REM答案

【问题标题】：Setting the fontSize of <html> in React for using REM in responsive design在 React 中设置 <html> 的 fontSize 以在响应式设计中使用 REM
【发布时间】：2019-09-24 01:27:45
【问题描述】：

我目前正在使用 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 (un) 绑定自身，并计算视口的当前大小以调整容器，只要视口发生变化（为了性能而受到限制）。我还使用媒体查询来调整容器中元素的大小和字体大小，这可以正常工作，但使用起来并不有趣。

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

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

【问题讨论】：

标签： reactjs responsive-design font-size

【解决方案1】：

现在我已经使用“document.documentElement”和“style.fontSize”来实现我想要的，但我不能 100% 确定这是最好的解决方案。在我接受我自己的答案作为最佳答案之前，我会看看是否能找到或获得更好的解决方案......

我将 useState 用于游戏维度，并且在 useEffect 中，我附加了监听器以调整事件大小，出于性能原因，我对其进行了一些限制。

const App = () => {
    const game_outerDOMNode = useRef(null)
    const rootElement = document.documentElement

    function getWindowDimensions() {
        const { innerWidth: width, innerHeight: height } = window
        return {
            width,
            height,
        }
    }

    const [gameDimensions, setGameDimensions] = useState({ width: 0, height: 0})

    useEffect(() => {
        function adjustScreen() {
            const game_outer = game_outerDOMNode.current
            const ratioHeight = 1 / 1.78
            const ratioWidth = 1.78
            const { width: vw, height: vh } = getWindowDimensions()

            const width = (vw > vh)
                ? (vh * ratioWidth <= vw)
                    ? (vh * ratioWidth)
                    : (vw)
                : (vh * ratioHeight <= vw)
                    ? (vh * ratioHeight)
                    : (vw)

            const height = (vw > vh)
                ? (vw * ratioHeight <= vh)
                    ? (vw * ratioHeight)
                    : (vh)
                : (vw * ratioWidth <= vh)
                    ? (vw * ratioWidth)
                    : (vh)

            const longestSide = height > width ? height : width
            const fontSize = longestSide/37.5  // my calculated global base size

            setGameDimensions({ width, height })
            rootElement.style.fontSize = `${fontSize}px`
        }
        const debouncedResizeHandler = debounce(200, () => {
            adjustScreen()
        })
        adjustScreen()
        window.addEventListener('resize', debouncedResizeHandler)
        return () => window.removeEventListener('resize', debouncedResizeHandler)
    }, [rootElement.style.fontSize])

    const { width: gameWidth, height: gameHeight } = gameDimensions

    return (
        <div 
            className="game__outer" 
            ref={game_outerDOMNode} 
            style={{ width: gameWidth, height: gameHeight }}
        >
            <div className="game__inner">
                {my actual game code}
            </div>
        </div>
    )
}

【讨论】：