更新時間：2025-09-09 23:46:21
開發(fā)經(jīng)驗
874最近在知乎上回答過響應(yīng)式的問題，也重新對網(wǎng)頁響應(yīng)式設(shè)計做了一個新的思考，我給整理總結(jié)了一下。
就目前來說(我就把時間劃分到2015年以后吧，之前的網(wǎng)頁就不拿來批判是否考慮響應(yīng)式了)，對于一個web，響應(yīng)式是最基本的要求，說簡單也簡單，但是要處理好每一個細(xì)節(jié)不是那么容易的，響應(yīng)式也是必修課，必然導(dǎo)致前端要提升自己的能力。
網(wǎng)站如果不支持響應(yīng)式或者響應(yīng)式很粗糙，誰會買單?
或許國內(nèi)的大部分網(wǎng)站并不刻意要求響應(yīng)式，就算要求響應(yīng)式，大部分適配后的網(wǎng)站效果也是非常粗糙的，總體來說國內(nèi)的網(wǎng)頁對響應(yīng)式有比較高的需求的都屬于一些要求高的或者專業(yè)性很強的網(wǎng)站，就算你不做響應(yīng)式，直接讓網(wǎng)頁按照PC端顯示的效果一樣(使用類似 的代碼，雖然不建議這樣做，但這能有效確保具有固定尺寸的網(wǎng)頁能按預(yù)期顯示)，直接適配手機，客戶也會買單。境外大部分客戶的網(wǎng)站，最基本的要求，不滿足響應(yīng)式不會買單。
該不該做兩套版本?
對于大多數(shù)網(wǎng)站，做兩套版本不是明智的選擇，因為后期維護成本，制作成本，調(diào)試成本，開發(fā)成本等都會增加很多，而且互聯(lián)網(wǎng)發(fā)展迅速，網(wǎng)頁過時的很快，一般情況，不值得花大量時間做兩套隨時會過時的頁面。并且大多數(shù)網(wǎng)站有常用的開源程序的約束，做兩套對后端的擴展也會有更高的要求，可能會增加后端和服務(wù)器端的工作量。一般做兩套，適用于一些擁有自己的源程序的大平臺或者大型網(wǎng)站或者一些知名的網(wǎng)站。大部分網(wǎng)站，無需做兩套。(當(dāng)然如果你錢多，團隊杠杠的，時間精力也多，就忽略此段落
響應(yīng)式技術(shù)的發(fā)展怎樣?
我們不用糾結(jié)于什么fluid流布局還是其它什么布局的，我們只要考慮首先把具體的項目按照預(yù)期設(shè)計表現(xiàn)出來即可，然后再深入考慮其它復(fù)雜的知識點。很多細(xì)節(jié)有單獨學(xué)習(xí)的必要，但是不一定都能折騰進實際項目中。實際項目還是要盡量精簡代碼，減少開發(fā)和后期維護成本，只要能夠滿足多種設(shè)備，并且利用響應(yīng)式有效控制不同尺寸圖片的加載，在現(xiàn)在的不斷提升的互聯(lián)網(wǎng)網(wǎng)速環(huán)境下，一樣訪問速度會很快。
對于網(wǎng)頁的響應(yīng)式設(shè)計，我不會存在正面還是負(fù)面的評價，因為它是基礎(chǔ)啊，你得適應(yīng)互聯(lián)網(wǎng)發(fā)展適應(yīng)發(fā)展需要啊，適應(yīng)客戶需要啊，做一套網(wǎng)頁，做好這個基礎(chǔ)，是理所當(dāng)然的。對于一項基本功，沒有必要說它好還是不好。
一個真正好的響應(yīng)式，是能夠處理不同尺寸的圖片的，如果CSS不能滿足需求，現(xiàn)在有很多成熟的結(jié)合JS的技術(shù)手段，可以配合CSS做到更優(yōu)秀的相應(yīng)，不會大幅度影響加載速度，它完全可以達到兩套web的效果。畢竟你不是做APP，是做網(wǎng)頁。如果你要拿APP的原生交互效果和流暢程度和web相比，我覺得偏題了，沒有必要，本身它們就是互補的東西，你不要他要，沒有誰排斥誰的必要。
如果還沒見過優(yōu)秀的響應(yīng)式網(wǎng)站，可以去看看FWA上面的很多獲獎的移動端網(wǎng)站。
總結(jié)
現(xiàn)在的響應(yīng)式技術(shù)，已經(jīng)很發(fā)達了，不但能滿足不同設(shè)備的適配，還能夠從交互，從體驗，從加載速度等方面進行匹配。現(xiàn)在的響應(yīng)式技術(shù)，不能和響應(yīng)式才開始流入的那幾年相提并論，什么代碼冗余等等的負(fù)面東西可以忽略了。其實對于響應(yīng)式這個東西，剩下的，只是愿不愿意學(xué)更加先進的技術(shù)，愿不愿意研究和發(fā)現(xiàn)，愿不愿意使用到實際項目中的問題而已。
我自己并不做獨立的前端工作，也不是什么大牛公司的前端開發(fā)，我只是為了服務(wù)自己設(shè)計的東西而已。只不過我也經(jīng)過了幾年的折騰，兼容性，響應(yīng)式各種，用過很多開發(fā)框架，學(xué)過研究過不少進口知識，做過一些被認(rèn)可的東東。我現(xiàn)在對于響應(yīng)式設(shè)計，只有一個方向：
盡可能精簡代碼
盡可能以最少的Responsive Breakpoints兼容更多的設(shè)備
盡可能優(yōu)化加載速度
盡可能避免使用JS(Retina圖片適配我一般使用JS，相對來說和響應(yīng)式分開，會更加靈活，避免Retina的圖片適配也使用CSS)
盡可能做到和PC端一樣流暢的交互效果
小工具
檢測網(wǎng)頁的性能，包含基本的響應(yīng)式性能：Google Insights
https://zhuanlan.zhihu.com/p/571538959
http://www.hxyhyz.com
我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗，每一個項目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！
