Web Responsive Component

我们也可以通过响应式的组件来实现响应式,响应式的组件很多,这里我们就暂时先通过介绍react-responsive,来让大家做一下了解

对于react-responsive,非常直观的表现就是

1
2
3
4
5
6
<Responsive minWidth={1200}>
//TODO: <Desktop />
</Responsive>
<Responsive maxWidth={1199}>
//TODO: <Mobile />
</Responsive>

以上代码表示,当分辨率>= 1200时, 显示PC端, 当分辨率<1200时, 显示手机端组件

除此之外, 此组件还有useMediaQuery等,可以通过hooks来辅助你进行一些逻辑判断, 例如

1
const isDesktop = useMediaQuery({ minWidth: 1200 })

优点在于可以更好的实现PC端和手机端的分离,假设他们的交互以及逻辑处理非常的不相似
缺点是会更加开发周期

PS: 在使用栅格时, 也可以通过响应式尺寸, 以及通过设置span=0,一样也可以实现此功能

下一节,我们会接着讲一下响应式中对于不同手机的分辨率适配