antd design的row和col的web端和移动端适配(响应式栅格)

914 阅读1分钟

今天完成的一个需求:某个功能会在手机和电脑上使用,所以需要做适配。完成这个功能用的是antd mobile的组件,但是我加需求的时候没注意,直接用了antd design的row和col,没有用antd mobile的Grid、Grid.Item,懒得换了,仔细看了看文档其实col也可以响应式,以前只用过row的gutter。

//row
gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 24]}

//col 屏幕<576px时,span={12} 屏幕屏幕≥992px时,span={6}(也可以写的更细致一点
 xs={12} lg={6}

效果如下: 移动端:

1669102318093.png

1669102493305.png

PC端:

image.png

1669102461705.jpg

row和col还是很好用的