什么是响应式网站，以及为什么我们需要响应式网站-帆域

自个人电脑上的浏览器访问人类历史上的第一个万维网站点开始，到iPhone的发布让网站的移动端版本成为刚需，再到如今人们张口闭口就是响应式Web设计，你已经历许多……

那么，什么是响应式网站，以及为什么我们需要响应式网站呢？

在响应式之前

在乔布斯拿着iPhone惊艳世界之前，Web开发者们设计网站时，面向的首位自然是桌面浏览器。

为什么说时iPhone的出现改变了这一切呢？因为iPhone搭载的多点触控技术颠覆了移动端浏览器的形态，它让移动端浏览器（当时的 iOS Safari）能够通过双指缩放的形式放大彼时的桌面端网站。为桌面设计的网站放在手机浏览器上自然是究极微缩的版本，但现在你可以通过放大来看清上面的每一个字了。

不过人们并不满足于此，能不能让手机浏览器无需放大就能直接看清网站上的字呢？最简单也是最暴力的方案就是另外设计一个与桌面网站平级的手机网站，然后检测用户在使用电脑还是手机，返回对应的网站（或者把用户重定向到对应的网站）。直到今天，你依然可以看到一些网站采用这种策略，主域名（例如www.example.com）是桌面端网站，分配一个子域名（例如m.example.com）作为移动端网站，之类的。

但是这带来了许多不方便之处。在学会响应式之前，网站设计时都写死了其页面尺寸，例如移动端站点为320像素的iPhone而设计，桌面端为960像素或者一千出头像素：遇到了其他尺寸的手机呢？缩放一下就好；遇到了更大尺寸的电脑呢？缩放一下就好，美观啥的不管了；那遇到了不大不小的iPad呢？无论是缩小桌面端还是放大手机端都很丑欸，难道说要再为平板尺寸的设备单独设计一个网站吗？

以及，在手机功能尚不完善的时代，开发者们出于各种原因，简化了移动端网站的许多功能，毕竟当时的人们还是以电脑为主要生产力的；可随着时代发展，手机的功能越来越全面，屏幕越来越大，算力越来越强，移动端网站相比桌面端的功能缺失逐渐出现了问题；可同时维护两个功能完全一致的网站是非常累人的，而移动端的尺寸又注定了不能直接照搬桌面端的网站……

一位工程师在他的文章中提出了响应式设计的理论。当时的CSS2中已经存在媒体查询的技术，开发者们通常用其来设置打印网站时的特殊格式。如果能类似地查询设备的屏幕尺寸，然后对不同尺寸的屏幕应用不同的样式，不就可以让同一个网站适配不同尺寸的屏幕大小了吗？

响应式设计的本质

响应式与非响应式并不影响网站的功能。在今天的前端基础三件套中，响应式并不是一个必须的选择项，它只是网站设计中的一个加分项，归属于CSS。

因此，并不存在一种所谓的响应式学习入门教程，因为其本身就是CSS中的一个部分。在CSS3中，使用媒体查询语句来限制部分CSS样式的生效范围，就是响应式设计在代码上的体现了。

直到今天，依然有许多人持有不同的意见，认为区分桌面站点和移动站点才是更好的选择。如何选择就是各位网站开发者需要考虑的事情了，对我来说，我选择的是响应式。

响应式前端框架

2025年的如今，我们想要开发响应式网站已经变得十分容易，只需要选择一个流行的前端Web框架即可，例如可以说最为流行的Bootstrap。

按照前后端分离的开发理念，后端框架的选择是不影响前端设计的，也就是说，无论你选择Python Django还是Java SpringBoot，配合Bootstrap还是其他的Element UI之类，都是完全没有问题的。以Bootstrap为例，简单来说，其在浏览器窗口中的主要显示区域划分出12个栏目，然后由开发者决定在不同的窗口尺寸下，每个块级元素分别占据几个栏目，实现响应式网站的快速设计。