响应式处理

对于不同的设备之间进行页面的展示，其尺寸可能会发生变化，如果我们希望在不同的设备中，控制某些元素的显示和隐藏，我们可以使用响应式处理

常见的响应式布局有：

Breakpoint prefix	Minimum width	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

我们可以将sm定义为手机的尺寸；将md定义为平板的尺寸；后面三个可以定义成桌面端显示器的尺寸

对于某些元素在手机端隐藏，我们可以如下定义：sm:hidden

对于某些元素在平板端显示，我们可以如下定义：md:block

只有在平板模式的时候，才显示栅格：md:grid grid-cols-2