刷新时，引用多媒体查询来控制PC/移动适配会互相切换

一、问题的描述

网站做了适配功能，能在PC和移动端进行适配。采用的技术是引用ChakraUI 提供的 useMediaQuery做界面的判断展示不同的适配。但在刷新的时候总会那么一闪适配的切换。给人一种视觉上不太好的体验。

二、正常的预期是什么？

刷新时能正常根据多媒体自适应布局。正常展示效果，不要有切换界面的效果。

三、问题产生的原因分析

这种写法会因为多语言初始化因多次加载时导致切换界面问题。

function Example() {
  const [isLargerThan1280] = useMediaQuery('(min-width: 1280px)')

  return (
    <Text>
      {isLargerThan1280 ? 'larger than 1280px' : 'smaller than 1280px'}
    </Text>
  )
}

换句话说就是 if else 的判断导致的

四、问题的解决方案

后面决定采用多媒体查询通过控制样式来展示不同的屏幕分辨率的适配。

注：最好结合Emotion Styled Components 组件提取样式组件，抽离dom与css 的分离

简单说这种事通过 display 控制显隐藏。

import styled, { StyledComponent } from "@emotion/styled";
import {Box, Text,Link} from "@chakra-ui/react"

export const RinoPCBox: StyledComponent<any> = styled(Box)`
    @media (min-width: 768px) {
        display: block;
    };
    @media (max-width: 768px) {
        display: none;
    }
`
export const RinoMobileBox: StyledComponent<any> = styled(Box)`
    @media (min-width: 768px) {
        display: none;
    };
    @media (max-width: 768px) {
        display: block;
    }
`