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

Posted 2021-04-24 韶华随记

今天接到一个需求，有两个模块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>