antd中如何根据屏幕分辨率的不同，而改变dom布局

今天接到一个需求，有两个模块A和模块B，在pc端上看，模块A之后，再是模板B，而在移动端时，则是模块B之后，再是模块A。

对于这个需求，我们很自然的想到的去监听window的resize事件，从而改变dom布局的顺序，以实现这个需求。

准备动工时，突然想到在antd pro项目，我们在内容页，按F12，将网页调成移动适配，发现我们的菜单就自动收缩起来了，这个是怎么实现的呢？我们是不是可以美其名曰借鉴一下。

有了这个思路之后，就去扒了一下Header.js是咋实现的，在BasicLayout.js中，我们看到了一个插件Media

import Media from 'react-media';

<Media query="(max-width: 599px)">
    {isMobile => <BasicLayout {...props} isMobile={isMobile} />}
  </Media>

我们只需要修改对应的query参数，来限定区分，从而达到不同分辨率下，显示不同

        <Media query="(max-width: 768px)">
          <Fragment>
            {protoLink}
            {advantage}
          </Fragment>
        </Media>
        <Media query="(min-width: 769px)">
          <Fragment>
            {advantage}
            <Col lg={{ span: 12, offset: 6 }}><Divider></Divider></Col>
            {protoLink}
          </Fragment>
        </Media>

至此，我们的需求就实现了。

// Media实现的源码
import * as React from "react";
export interface MediaQueryObject {
    [id: string]: boolean | number | string;
}
export interface MediaProps {
    query: string | MediaQueryObject | MediaQueryObject[];
    defaultMatches?: boolean;
    children?: ((matches: boolean) => React.ReactNode) | React.ReactNode;
    render?: () => React.ReactNode;
    targetWindow?: Window;
    onChange?: (matches: boolean) => void;
}
/**
 * Conditionally renders based on whether or not a media query matches.
 */
declare class Media extends React.Component<MediaProps> {}
export default Media;