jsx import { jsx , Global , Interpolation , Theme } from "@emotion/react" ; import React , { useCallback , useEffect , useState } from "react" ; import { ContextValue , getContextValue } from "../context" ; import { useWindowResize } from "../Effect/useWindowResize" ; import round from "lodash/round" ; import { useViewport } from "../Effect/useViewport" ; export interface ContainerProps { globalStyle ? : Interpolation < Theme > ; children ? : React . ReactNode ; designWidth ? : number ; } param props export function Container ( props ) { const { minDocWidth , maxDocWidth } = getContextValue ( ) as ContextValue ; const { designWidth = 750 , globalStyle , children } = props ; const expectFontSize = useCallback ( ( ) => { const winWidth = window . innerWidth ; let expectFontSize ; if ( winWidth >= maxDocWidth ) { expectFontSize = ( maxDocWidth * 100 ) / designWidth ; } else if ( winWidth <= minDocWidth ) { expectFontSize = ( minDocWidth * 100 ) / designWidth ; } else { expectFontSize = ( winWidth * 100 ) / designWidth ; } return expectFontSize ; } , [ designWidth , minDocWidth , maxDocWidth ] ) ; const [ baseFontSize , setBaseFontSize ] = useState < number > ( expectFontSize ( ) ) ; useWindowResize ( ( ) => setBaseFontSize ( ( ) => expectFontSize ( ) ) ) ; const scaleFont = useCallback < ( ) => void > ( ( ) => { let computeSize = parseFloat ( window . getComputedStyle ( document . documentElement ) . fontSize ) ; if ( typeof computeSize === "number" && computeSize !== baseFontSize ) { setBaseFontSize ( round ( baseFontSize ** 2 / computeSize , 1 ) ) ; } } , [ baseFontSize ] ) ; useEffect ( scaleFont , [ scaleFont ] ) ; useViewport ( ) ; useEffect ( ( ) => { const activable = ( ) => { } ; document . body . addEventListener ( "touchstart" , activable ) ; return ( ) => { document . body . removeEventListener ( "touchstart" , activable ) ; } ; } , [ ] ) ; return ( < React . Fragment > < Global styles = { [ { "*" : { boxSizing : "border-box" , } , html : { WebkitTapHighlightColor : "transparent" , WebkitOverflowScrolling : "touch" , WebkitTextSizeAdjust : "100%" , fontSize : `${ baseFontSize }px` , touchAction : "manipulation" , } , body : { fontSize : "16px" , margin : "0 auto" , maxWidth : `${ maxDocWidth }px` , minWidth : `${ minDocWidth }px` , } , [ `@media (min-width: ${ maxDocWidth }px)` ] : { html : { fontSize : `${ ( 100 * maxDocWidth ) / designWidth }px` , } , } , [ `@media (max-width: ${ minDocWidth }px)` ] : { html : { fontSize : `${ ( 100 * minDocWidth ) / designWidth }px` , } , } , } , globalStyle , ] } / > { children } < /React.Fragment>); }