响应式布局

在原生CSS中，实现响应式布局是比较繁琐的，我们需要针对不同类型的屏幕编写CSS媒体查询，并对应设置不同的样式，然而这类代码又比较重复，很多框架都对响应式布局进行了不同程度的封装。TailwindCSS中，将响应式布局封装成了原子类的前缀，实际上写起来更加直观和方便。

响应式前缀

TailwindCSS中提供了如下的响应式前缀方便我们使用，我们可以根据该表格，适配不同的屏幕大小。

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) { ... }`

原子类都可以搭配这些响应式前缀使用，例子如下。

<div class="container mx-auto mt-4 grid grid-cols-1 lg:grid-cols-4 gap-x-4 gap-y-4">
    <div class="w-full h-8 bg-red-300"></div>
    <div class="w-full h-8 bg-red-300"></div>
    <div class="w-full h-8 bg-red-300"></div>
    <div class="w-full h-8 bg-red-300"></div>
    <div class="w-full h-8 bg-red-300"></div>
    <div class="w-full h-8 bg-red-300"></div>
</div>

代码中，我们在屏幕宽度低于1024px区间内使用单列的Grid布局，高于1024px时使用4列的Grid布局。

Container组件

TailwindCSS提供了Container组件。如果没有响应式布局的开发经验，Container可能不太好理解。Container可以用作页面的容器，它用于在一个屏幕宽度的响应式区间内固定内容的宽度。

Breakpoint	Properties
None	width: 100%;
sm (640px)	max-width: 640px;
md (768px)	max-width: 768px;
lg (1024px)	max-width: 1024px;
xl (1280px)	max-width: 1280px;
2xl (1536px)	max-width: 1536px;

下面是一段例子代码。

<div class="container mx-auto mt-4">
    <div class="w-full h-8 bg-red-300"></div>
</div>

代码中，mx-auto实际上是margin-right: auto; margin-left: auto;，它起到让Container居中的效果。

以上面例子为例，根据TailwindCSS内置的响应式区间配置，Container所在的<div>在屏幕宽度小于640px时，它的宽度为100%；在640px到768px的区间内时，它的宽度为640px；在768px到1024px的区间内时，它的宽度为768px，后续以此类推。

Container也可以搭配响应式前缀使用。例如lg:container中，lg表达@media (min-width: 1024px) { ... }，container搭配lg后会在屏幕宽度低于1024px时表现为宽度100%，屏幕宽度在1024px到1280px的区间内时表现为max-width: 1024px;，后续以此类推，搭配sm、md等前缀也是类似的渲染逻辑。

作者：Gacfox