Установка fontSize <html>в React для использования REM в адаптивном дизайне - PullRequest
Новая
       23

Установка fontSize <html>в React для использования REM в адаптивном дизайне

0 голосов
/ 06 мая 2019

В настоящее время я работаю над любимым веб-проектом с реагированием, и я использую контейнер 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, (un) связывает себя через useEffect и вычисляет текущий размер области просмотра для настройки контейнера при каждом изменении области просмотра (регулируется для производительности). Я также использую медиа-запросы для настройки размера и размера шрифта элементовв контейнере, который работает нормально, но не очень интересно работать.

Я хочу расширить эту идею и изменить размер шрифта HTML-элемента в той же функции, которая вычисляла текущий размер контейнератак что я могу использовать REM для масштабирования размера шрифта и других элементов на основе моего вычисленного размера корневого шрифта.

Существует ли допустимый и проверенный на будущее способ изменения стиля шрифта для моего тега через ReactJS, либочерез тег стиля или атрибут стиля?

1 Ответ

0 голосов
/ 07 мая 2019

Сейчас я прибегаю к использованию «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>
    )
}
...