react适配PC端和H5页面

react适配PC端和H5页面

第一种方法：

监听页面尺寸，看页面是否大于适配的宽度，从而选择显示的是移动端还是pc端

import Mobile from './components/mobile.js'
import PC from './components/PC.js'
import React, { useState, useEffect } from 'react'
export default () => {
    const [width, setWidth] = useState(0)
    useEffect(() => {
        handleResize()
        window.addEventListener('resize', handleResize)
        return () => {
            window.removeEventListener('resize', handleResize)
        }
    }, [])

    function handleResize() {
        let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
        setWidth(width)
    }
  
    return <>{width > 768 ? <PC /> : <Mobile />}</>
}

第二种方法：

使用媒体查询，通过设置样式实现自适应

@media (max-width:768px){}  宽度最大为768px，超出则不显示
@media (min-width:769px){}  宽度最小为769px，小于则不显示