响应式网站如何设计

时间：2022-06-06 18:57:01 | 来源：行业动态

时间：2022-06-06 18:57:01 来源：行业动态

就目前来说(我就把时间划分到2015年以后吧，之前的网页就不拿来批判是否考虑响应式了)，对于一个web，响应式是最基本的要求，说简单也简单，但是要处理好每一个细节不是那么容易的，响应式也是必修课，必然导致前端要提升自己的能力。



一：网站如果不支持响应式或者响应式很粗糙，谁会买单?

或许国内的大部分网站并不刻意要求响应式，就算要求响应式，大部分适配后的网站效果也是非常粗糙的，总体来说国内的网页对响应式有比较高的需求的都属于一些要求高的或者专业性很强的网站，就算你不做响应式，直接让网页按照PC端显示的效果一样(使用类似 的代码，虽然不建议这样做，但这能有效确保具有固定尺寸的网页能按预期显示)，直接适配手机，客户也会买单。境外大部分客户的网站，最基本的要求，不满足响应式不会买单。

二：该不该做两套版本?

对于大多数网站，做两套版本不是明智的选择，因为后期维护成本，制作成本，调试成本，开发成本等都会增加很多，而且互联网发展迅速，网页过时的很快，一般情况，不值得花大量时间做两套随时会过时的页面。并且大多数网站有常用的开源程序的约束，做两套对后端的扩展也会有更高的要求，可能会增加后端和服务器端的工作量。一般做两套，适用于一些拥有自己的源程序的大平台或者大型网站或者一些知名的网站。大部分网站，无需做两套。(当然如果你钱多，团队杠杠的，时间精力也多，就忽略此段落)

三：响应式技术的发展怎样?

我们不用纠结于什么fluid流布局还是其它什么布局的，我们只要考虑首先把具体的项目按照预期设计表现出来即可，然后再深入考虑其它复杂的知识点。很多细节有单独学习的必要，但是不一定都能折腾进实际项目中。实际项目还是要尽量精简代码，减少开发和后期维护成本，只要能够满足多种设备，并且利用响应式有效控制不同尺寸图片的加载，在现在的不断提升的互联网网速环境下，一样访问速度会很快。

对于网页的响应式设计，我不会存在正面还是负面的评价，因为它是基础啊，你得适应互联网发展适应发展需要啊，适应客户需要啊，做一套网页，做好这个基础，是理所当然的。对于一项基本功，没有必要说它好还是不好。

一个真正好的响应式，是能够处理不同尺寸的图片的，如果CSS不能满足需求，现在有很多成熟的结合JS的技术手段，可以配合CSS做到更优秀的相应，不会大幅度影响加载速度，它完全可以达到两套web的效果。毕竟你不是做APP，是做网页。如果你要拿APP的原生交互效果和流畅程度和web相比，我觉得偏题了，没有必要，本身它们就是互补的东西，你不要他要，没有谁排斥谁的必要。

如果还没见过优秀的响应式网站，可以去看看FWA上面的很多获奖的移动端网站。

四：总结

现在的响应式技术，已经很发达了，不但能满足不同设备的适配，还能够从交互，从体验，从加载速度等方面进行匹配。现在的响应式技术，不能和响应式才开始流入的那几年相提并论，什么代码冗余等等的负面东西可以忽略了。其实对于响应式这个东西，剩下的，只是愿不愿意学更加先进的技术，愿不愿意研究和发现，愿不愿意使用到实际项目中的问题而已。

我自己并不做独立的前端工作，也不是什么大牛公司的前端开发，我只是为了服务自己设计的东西而已。只不过我也经过了几年的折腾，兼容性，响应式各种，用过很多开发框架，学过研究过不少进口知识，做过一些被认可的东东。我现在对于响应式设计，只有一个方向：

尽可能精简代码

尽可能以最少的Responsive Breakpoints兼容更多的设备

尽可能优化加载速度

尽可能避免使用JS(Retina图片适配我一般使用JS，相对来说和响应式分开，会更加灵活，避免Retina的图片适配也使用CSS)

尽可能做到和PC端一样流畅的交互效果