如今响应式设计如此流行，那么如何才能做好一个响应式网站呢？

时间：2023-12-11 06:48:01 | 来源：网站运营

时间：2023-12-11 06:48:01 来源：网站运营

如今响应式设计如此流行，那么如何才能做好一个响应式网站呢？：

以下，是我的亲身实践总结出来的，简洁易懂。只要你懂一点基础的HTML+CSS知识，你就能学会响应式设计。同时，内含响应式布局的关键代码分享，可供大家收藏借鉴。不足之处，还望海涵。因为我不是职业前端工程师，纯属兴趣爱好分享。

做响应式网页设计，只要你理解了网页为什么会【响应】、根据什么来【响应】的底层逻辑，这一切都豁然开朗了。然后要做好一个响应式网站，一是需要你有良好的排版与审美，再者就是得有耐心去慢慢调试。

响应式网页设计的基本原理

首先，我们知道一个网页其实就是一个HTML（超文本标记语言）文档，HTML文档标记了网页中的图片、文字、超级链接、表单....等元素，而CSS（层叠样式）也是一种计算机标记语言，通过CSS标记语言，我们可以标记HTML文档中的图片、文字、超级链接、表单...等元素以何种外观样式呈现。

比如我可以通过CSS设置图片在HTML文档流中，是否呈现出圆角、是否加边框、是否为灰色、或模糊的样式。同时我们的CSS，还可以通过其自带的媒体查询属性来【判断】显示窗口的宽度，然后针对不同的窗口宽度，来设置HTML元素的CSS外观样式。

比如在同一个HTML文档中的同一行文字，当在大尺寸的电脑屏幕上显示时，我们可以给他设置更大的字号，也不至于内容溢出；而在小屏幕手机上时，可以设置更小的字号，赋予其更加整洁的版面效果。如此一番操作下来，这个网页就是响应式的了。

其中，CSS的这个媒体查询标记，就是响应式设计的最关键的代码。写作：

@media (判断条件) { /*当满足判断条件成立时，就执行这里面写的CSS样式。*/} 例如，当显示窗口的宽度大于1300像素时，网页中的图片<img>就变为灰色，其CSS样式就可以写作：

@media (min-width: 1300px) { img{ filter: grayscale(100%); }} 浏览器效果：

如图所示：浏览器宽度拖到1200px~1300px之间时，图片就显示为彩色，图片大于1300px时，图片就显示为灰色。所以，什么是响应式？这这这这这就是。

好，现在我们明白了响应式的基本原理，接下来，我们再玩个花样。

我们让图片圆角，随着浏览器窗口宽度不断缩小，图片的圆角就逐渐变大。

那么其CSS样式，我们可以这样依次递进写下来：

@media (min-width: 1100px) and (max-width:1200px){ img{ border-radius: 20px; }}@media (min-width: 1000px) and (max-width:1100px){ img{ border-radius: 40px; }}@media (min-width: 900px) and (max-width:1000px){ img{ border-radius: 60px; }}@media (min-width: 800px) and (max-width:900px){ img{ border-radius: 80px; }}@media (min-width: 700px) and (max-width:800px){ img{ border-radius: 100px; }}@media (min-width: 600px) and (max-width:700px){ img{ border-radius: 120px; }}@media (min-width: 500px) and (max-width:600px){ img{ border-radius: 140px; }}浏览器效果：

小结

通过上面的案例，我们可以看到：做响应式网页，其实最主要的就是要学会灵活运用CSS3的@media媒体查询，设置好屏幕宽度（或者叫窗口宽度）的分界点，然后根具不同的媒体屏幕宽度，单独设置样式，精心调教，即可做出一个体验完善的响应式网站。

---

再来个网站实例（www.ui100.top）

比如我之前做的这个【全链路UI设计网】，就采用了响应式布局，网页完全兼容大尺寸的PC、iPad pro、iPad、最新的iPhone，以及更早的iPhone SE，总之就是根据网页可能出现在的设备中，我都单独做了CSS样式微调，以确保用户都能看到一个体验完整的网页，虽然我的前端技术很一般，但是我能想得到的点，我一定会把它做得最好。

PC端 尺寸

这个网站首页，在电脑PC端呈现的是下图样式：

△此时导航栏处的logo、slogan、目录、报名咨询按钮得到完全展示，符合鼠标精准点击的交互习惯。这种样式的呈现，是基于【屏幕宽度＞1300像素】来设置的，导航栏<header>标签下的.container容器宽度，以及其他DIV布局下的.container容器宽度都被被限制在1206px。

这就是针对PC端实现响应式布局的关键CSS样式：

/* PC端的单独样式，写在里面就可以了*/@media (min-width: 1300px){ .container { width: 1206px; }}

iPad Pro尺寸

然后，当屏幕宽度缩小，就过渡到了iPad pro的尺寸时，由于ipad pro本身尺寸也不小，所以网页整体布局并没有太大变化，只是在此种情况下【992像素 < 屏幕宽度 < 1299像素】，我将主标题的字号减小了，同时视频右侧的课程目录列表相对于PC版省略了【课时】两个汉字，让整个版面显得不那么拥挤。这同样只需用HTML+CSS配合，即可实现，得到如图：

同样的，此时DIV布局下的.container容器宽度都被被限制在1206px。这就是针对iPad端实现响应式布局的关键CSS样式：

/* iPad pro端的单独样式，写这里面就可以了*/@media (max-width: 1299px) and (min-width: 992px){ .container { width: 970px; }}

iPad尺寸

当屏幕宽度缩小到到 768px~991px时，就让网页的宽度匹配ipad竖屏的屏幕宽度，此时网页会呈现出下面这样的样式：

△注意看，此时的导航栏右侧的目录，已经被隐藏起来了，点击右上角按钮可展开菜单。与此同时，页面字号变得更小了，立即报名、报名咨询按钮，则出现在了屏幕底部，符合ipad手指点击交互的规律。还有就是课程目录，从之前的【视频右侧】变换到了【视频下侧】列表横向排列。

此时的HTML文档，依然是之前那个文档，只是针对当前的屏幕尺寸状态，单独设置了其CSS样式，就可以达到如此适应iPad设备的效果，所以，什么是响应式？这这这这这就是。

这就是针对iPad端实现响应式布局的关键CSS样式：

/* iPad端的单独样式，写这里面就可以了*/@media (max-width: 991px) and (min-width: 768px){ .container { width: 970px; }}

iPhone尺寸

然后，同样的套路设置手机屏幕的媒体查询分界点。当屏幕小于ipad宽度尺寸，就可以让网页的宽度去匹配手机的展示特性了。

/* iphone以及手机端的单独样式，写这里面就可以了*/@media ( max-width: 767px){ .container { width: 95%; }}...

如此往复，直到通过media媒体查询，设置完最小设备iPhone SE的单独样式，这个网页基本上就做到了全面兼容了。期间，需要注意要分离共用CSS样式，以减少重复代码，提升网页性能。

特殊情况的响应式

如遇个别特殊情况，可以配合JavaScript来处理响应式，我的原则是：CSS3能解决的，尽量不用JS。比如在这个网页中，详情页的配图，有两套，一套是适应大屏幕（PC+iPad pro），如图：

一套是适应移动小屏幕（iPad + iPhone、以及更小设备），如图：

如果说，只是单纯的通过CSS的@media查询来判断屏幕宽度，然后用CSS的【display:none】或【display:block】去响应不同状态下详情图的隐藏或显示，那么这两套图在页面被访问时，都会同时加载，这必然会耗费更多服务器资源，影响网页打开速度。

而用户单次访问网页的设备尺寸通常都是固定的，没有谁会像我一样，拖着窗口变来变去，所以，基于此种情况下，我只需要反馈用户当下设备、当下窗口尺寸所需要的详情图即可了，而不必两套图都给他。所以，在这个网页单页中，我就要结合了JS，来删除用户不需要的详情图节点，响应不同设备的样式需求，同时亦能提升网页性能。

这种单页HMTL文档中，我觉得这应该是最直观的处理方式了吧。当然了，在我认知之外，也许还有更好的技术处理方式，但在我的前端技术真的很一般，能分享的就这么多了。

更多Demo

我曾用类似的@media媒体查询的响应式布局思路，还曾编写过的这些网页，大家可以前往查看体验。

综上所述

要做好一个响应式网站，一是需要深入理解HMTL+CSS的基础知识，掌握@media属性的书写样式，同时要具备一定的JavaScript编程知识用作处理一些特殊情况，再者要耐得住性子，去针对不同尺寸的设备慢慢调试，如此以来，就能做出一个高质量的响应式网站。

让你的一套代码，适应所有设备，这感觉倍爽。最后，再放几张图，展示一下我从视觉设计到响应式代码的调教成果：

望以上，对大家有所帮助。

---

关于我（ @酷coo豆 ）

我是靠自学平面设计、UI设计、网页前端进入互联网行业的个人站长。我在本站，热衷于传播平面设计、互联网IT的基础知识，乐于分享自学设计的相关经验、书籍、教程，我相信只要能找到优质的自学教程，人人都可以成为理想中的自己。

平面设计教程推荐：http://ps.xxriji.cn/zixue.html

web前端基础教程推荐：http://www.xxriji.cn/wap/webdeveloper.html

（完）