“響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)的理念是：集中創(chuàng)建頁(yè)面的圖片排版大小，可以智能地根據(jù)用戶(hù)行為以及使用的設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相對(duì)應(yīng)的布局。”

以上來(lái)自百度百科，簡(jiǎn)單來(lái)說(shuō)，響應(yīng)式網(wǎng)頁(yè)就是一個(gè)域名適配多種設(shè)備，網(wǎng)頁(yè)布局允許在設(shè)備轉(zhuǎn)換的情況下自行優(yōu)化，我們通常稱(chēng)之為“下掉式排版“。在各類(lèi)移動(dòng)設(shè)備鋪天蓋地的當(dāng)下，響應(yīng)式網(wǎng)頁(yè)無(wú)疑是大部分人在進(jìn)行網(wǎng)頁(yè)制作時(shí)候的優(yōu)先考慮對(duì)象，任何設(shè)計(jì)都不能十全十美，有優(yōu)勢(shì)必然就有缺點(diǎn)，首先讓我們看一下響應(yīng)式網(wǎng)頁(yè)有哪些優(yōu)勢(shì)？

一．面對(duì)不同分辨率設(shè)備靈活性強(qiáng)

如今我們做設(shè)計(jì)稿時(shí)，為了力求視覺(jué)效果的大氣，通常用1920*1080這個(gè)尺寸作為一屏來(lái)進(jìn)行設(shè)計(jì)，而有不少的情況下，當(dāng)我們的設(shè)計(jì)稿進(jìn)入前端交予客戶(hù)省查時(shí)，通常會(huì)發(fā)現(xiàn)，還有為數(shù)不少的客戶(hù)在用筆記本，也就是1440*600的屏幕，甚至還有更小的分辨率，此時(shí)，因?yàn)椴皇琼憫?yīng)式的情況下，我們的設(shè)計(jì)呈現(xiàn)的方式讓人非常尷尬。

在小屏中，我們的篩選框被“吃掉了”！這個(gè)時(shí)候設(shè)計(jì)師就要苦惱地加班改出個(gè)小屏排版，這是很降低效率的重復(fù)性工作了。

另外，除了大小屏幕，現(xiàn)在大家都是低頭族，人不吃飯可以活5天，不喝水可以活1天，不拿手機(jī)1秒都坐立不安。當(dāng)手機(jī)已經(jīng)包攬了幾乎別的電子設(shè)備所有的功能的時(shí)候，還有幾人會(huì)為了看一個(gè)網(wǎng)站而去開(kāi)電腦呢？畢竟我們現(xiàn)在聊天，發(fā)圖片，刷微博，看資訊都是用手機(jī)，而一個(gè)不適配手機(jī)分辨率的網(wǎng)站會(huì)有什么結(jié)果呢？就是當(dāng)你告知?jiǎng)e人網(wǎng)址時(shí)，別人恰巧是用手機(jī)打開(kāi)的時(shí)候，網(wǎng)頁(yè)會(huì)長(zhǎng)什么樣子呢？

手機(jī)樣式真是擁擠不堪，眼睛都要瞎掉了！什么都看不清的情況下，我怎么按篩選框呢？當(dāng)然只有放大啦！相信大家都有體會(huì)，當(dāng)放大網(wǎng)頁(yè)時(shí)，填寫(xiě)信息或者做篩選的時(shí)候是一件多么痛苦的事情。所以這個(gè)時(shí)候，響應(yīng)式的優(yōu)勢(shì)就顯露無(wú)疑。

無(wú)論你是站著打開(kāi)，坐著打開(kāi)，躺著打開(kāi)，網(wǎng)頁(yè)都能保持最初的那個(gè)美好的樣子。

二．不同設(shè)備操作起來(lái)沒(méi)有顧慮

什么時(shí)候我們會(huì)用手機(jī)去刷網(wǎng)頁(yè)？通常是需要無(wú)聊的度過(guò)很長(zhǎng)一段時(shí)間的時(shí)候，比如地鐵上，這個(gè)時(shí)候我們是最有耐性去觀看一個(gè)網(wǎng)頁(yè)，甚至更深入的去探尋這個(gè)網(wǎng)頁(yè)的其他功能，而一個(gè)不適配的網(wǎng)頁(yè)，在操作上面必然有著鴻溝一般的障礙，成倍的消磨著使用者的耐性。

手指是有寬度的，所以手機(jī)端的按鈕尺寸有一定的規(guī)范，當(dāng)網(wǎng)頁(yè)在最初設(shè)計(jì)的時(shí)候并不是奔著響應(yīng)式這個(gè)條件的話(huà)，那么我們的網(wǎng)頁(yè)可能會(huì)出現(xiàn)這種情況，在pc端看起來(lái)非常好看的小元素以及合理的按鈕，用手機(jī)打開(kāi)的時(shí)候，一切都變得不那么和諧了，選框之間的間距不夠，或者輸入框本身不夠大的時(shí)候，都會(huì)讓用戶(hù)在點(diǎn)擊使用的過(guò)程中發(fā)生錯(cuò)誤從來(lái)產(chǎn)生操蛋心理，并對(duì)這類(lèi)網(wǎng)站失望、反感。

而要是我們最初便是響應(yīng)式的網(wǎng)站，并把這些因素考慮進(jìn)去后，因?yàn)榫W(wǎng)頁(yè)是適配型，所以絕對(duì)不會(huì)出現(xiàn)手指擋住輸入框，或點(diǎn)錯(cuò)等讓人奔潰的二次操作以及返回重新加載。

此時(shí)你要說(shuō)，哇哦，響應(yīng)式優(yōu)點(diǎn)這么多，我也要做響應(yīng)式！以后都做響應(yīng)式！年輕人，事無(wú)一面，有好必有壞。那么響應(yīng)式讓人發(fā)指的缺點(diǎn)又是什么呢？

一．工作量大，周期長(zhǎng)

就好比現(xiàn)在3-4個(gè)人的工作量你讓1個(gè)人做了，勢(shì)必這件事情的完成周期會(huì)延長(zhǎng)，前端在寫(xiě)響應(yīng)式的時(shí)候，可不是就一套代碼那么方便了，他需要在一個(gè)域名里面套多個(gè)代碼以達(dá)到網(wǎng)頁(yè)適配的這個(gè)結(jié)果，并且還要各方面的考慮各個(gè)尺寸和平臺(tái)的適配性，聽(tīng)起來(lái)就好復(fù)雜。

二．代碼冗長(zhǎng)，加載速度過(guò)慢

根據(jù)我們稻殼互聯(lián)的前端技術(shù)猿反饋，響應(yīng)式網(wǎng)站的代碼狀態(tài)就如塞滿(mǎn)衣服的行李箱，打開(kāi)需要一定的時(shí)間，這段時(shí)間不僅考驗(yàn)用戶(hù)的網(wǎng)速更加考驗(yàn)了用戶(hù)的耐性。所以是否適合做響應(yīng)式網(wǎng)站，要根據(jù)你的網(wǎng)站內(nèi)容而定，而不是追趕潮流了。

三．局限性大，缺乏定制化

身為一個(gè)有夢(mèng)想，有追求的設(shè)計(jì)師，每一個(gè)設(shè)計(jì)稿對(duì)我們而言都是親生兒女，有誰(shuí)不希望自己的親身兒女長(zhǎng)得漂亮，讓大家喜歡，誰(shuí)不希望自己的親身兒女和別人不一樣，有所特長(zhǎng)？然而由于響應(yīng)式網(wǎng)站的特殊性，導(dǎo)致它對(duì)網(wǎng)頁(yè)設(shè)計(jì)的限制十分巨大，且百度一下，鋪天蓋地的響應(yīng)式建模網(wǎng)站。有種誰(shuí)都在做的感覺(jué)，這就是和快時(shí)尚消費(fèi)品一樣樣的，便宜是便宜，撞衫率高達(dá)百分之99.9。

而且響應(yīng)式網(wǎng)頁(yè)無(wú)法突破框架，需要規(guī)規(guī)矩矩的分割式排版，對(duì)圖片的要求也極高（這個(gè)我在后續(xù)文章中會(huì)著重分析）。內(nèi)容復(fù)雜的，列表信息過(guò)多的網(wǎng)站都不適合響應(yīng)式。畢竟要適配各個(gè)不同類(lèi)型的設(shè)備，設(shè)計(jì)方面不宜于太過(guò)復(fù)雜，不然容錯(cuò)率低下，前端技術(shù)猿們?nèi)菀妆罎ⅰ?/p>

綜上所訴，響應(yīng)式有它方便的地方，也有它代價(jià)高的地方，所以到底要不要做響應(yīng)式，還是要根據(jù)自我情況而定，適合自己的才是最好的。

名稱(chēng)欄目：做響應(yīng)式網(wǎng)站 一定要考慮這幾點(diǎn)
分享URL：http://m.newbst.com/news/112885.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有響應(yīng)式網(wǎng)站等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)