响应式网页用什么框架？这几个主流选择真香

响应式网页为啥非得用框架

做网站的时候，总得考虑手机、平板、电脑不同屏幕的显示效果。自己从零写 CSS 适配各种尺寸，累不说，还容易出 bug。这时候用现成的响应式框架，就像买房带装修，省心又靠谱。

市面上的框架不少，挑几个用得顺手的说说，都是实战中验证过的。

Bootstrap：老牌王者，上手快

要说响应式框架里谁最出名，非 Bootstrap 莫属。从 3.0 开始就主打移动优先，栅格系统灵活，一行代码就能实现不同屏幕下的布局切换。

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">内容块1</div>
    <div class="col-md-6 col-lg-4">内容块2</div>
    <div class="col-md-12 col-lg-4">内容块3</div>
  </div>
</div>

上面这段代码，在中等屏幕上两列并排，在大屏幕上三列分布，小屏幕自动堆叠。日常做个企业站、后台管理界面，Bootstrap 几乎不用额外写样式，组件也全，按钮、导航栏、弹窗都有。

Tailwind CSS：不写 CSS 的新玩法

如果你受够了写一堆 class 还要来回切 CSS 文件，Tailwind 可能会让你眼前一亮。它是个工具优先的框架，所有样式都通过 class 直接控制，比如 md:flex 表示中等屏幕以上开启弹性布局。

<div class="flex flex-col md:flex-row gap-4 p-4">
  <div class="w-full md:w-1/2">左侧内容</div>
  <div class="w-full md:w-1/2">右侧内容</div>
</div>

这种写法一开始看着密密麻麻，但熟悉后改布局特别快，适合喜欢写 HTML 一口气搞定的人。配合官方的响应式前缀（sm, md, lg, xl），适配多端轻而易举。

Foundation：功能更细，适合复杂项目

和 Bootstrap 齐名的老牌框架，功能更偏向定制化。如果你做的不是模板站，而是需要精细控制交互和布局的产品页面，Foundation 提供的模块更多，比如响应式菜单、滑动轮播、表单验证都能单独引入。

不过配置稍复杂，适合团队开发或中大型项目。小站点用它有点杀鸡用牛刀，但该出手时别犹豫。

要不要自己搞一套？

有人问，能不能不用框架，直接写媒体查询？当然可以。比如：

@media (max-width: 768px) {
  .header {
    font-size: 16px;
  }
}

@media (min-width: 992px) {
  .header {
    font-size: 24px;
  }
}

但问题是，一个项目几十个组件，每个都要写断点，后期维护头疼。除非你对设计一致性要求极高，或者项目极小，否则还是推荐用框架打底，再按需调整。

实际工作中，我常拿 Bootstrap 搭结构，再用 Tailwind 补细节。两个不冲突，看你怎么组合。关键是要选一个自己顺手的，别光听别人说哪个“最好”，用着舒服才是真的好。