什么是響應(yīng)式網(wǎng)站？與自適應(yīng)頁(yè)面設(shè)計(jì)的區(qū)別
2023-02-04 加入收藏
你是否曾有過(guò)這樣的體驗(yàn)，使用手機(jī)瀏覽網(wǎng)頁(yè)時(shí)發(fā)現(xiàn)它是呈現(xiàn)電腦版頁(yè)面，需要不斷地縮放才能看清內(nèi)容?，F(xiàn)在響應(yīng)式網(wǎng)頁(yè)的出現(xiàn)解決了這個(gè)問(wèn)題，但仍有很多人不知道什么是響應(yīng)式網(wǎng)站？與自適應(yīng)頁(yè)面設(shè)計(jì)有什么區(qū)別？今天告訴大家答案。
一、什么是響應(yīng)式頁(yè)面設(shè)計(jì)
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design, RWD）又稱為自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)、適應(yīng)性網(wǎng)頁(yè)、回應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，是設(shè)計(jì)網(wǎng)站時(shí)采用CSS3，以百分比的方式以及彈性的畫(huà)面設(shè)計(jì)，在不同分辨率下改變網(wǎng)頁(yè)頁(yè)面的布局排版，讓不同的設(shè)備都可以正常瀏覽同一網(wǎng)站，提供最佳的視覺(jué)體驗(yàn)。
以前很多手機(jī)版網(wǎng)站設(shè)計(jì)都是與電腦上的網(wǎng)站區(qū)隔開(kāi)來(lái)另外再制作，就會(huì)導(dǎo)致如果進(jìn)行更新網(wǎng)頁(yè)內(nèi)容就必須要更新兩次。現(xiàn)在使用響應(yīng)式頁(yè)面設(shè)計(jì)模式所制作出來(lái)的網(wǎng)站，相同的網(wǎng)址、相同的網(wǎng)站內(nèi)容，使用不同型號(hào)的電腦、手機(jī)以及平版瀏覽時(shí)，網(wǎng)站的代碼可讓頁(yè)面內(nèi)容適應(yīng)不同分辨率的設(shè)備，自動(dòng)排版成適合瀏覽的大小，簡(jiǎn)單的說(shuō)，讓網(wǎng)頁(yè)中的文字以及圖片甚至是網(wǎng)站的特殊效果，自動(dòng)適應(yīng)用戶正在瀏覽屏幕的大小。
? 屏幕分辨率寬度在1024像素以上時(shí)，傳回的網(wǎng)頁(yè)會(huì)顯示網(wǎng)站最完整的內(nèi)容。
? 屏幕分辨率寬度在700像素以下時(shí)， banner會(huì)自動(dòng)縮排，橫式導(dǎo)航欄改成下拉式選單。
? 屏幕分辨率寬度在400像素以下時(shí)，版型會(huì)顯示全為直條狀，便于手機(jī)向下滾動(dòng)閱讀。
同一個(gè)網(wǎng)站就有各種不同的頁(yè)面效果呈現(xiàn)，顯示的字體大小也不同，讓用戶易于瀏覽，同時(shí)也減少其在不同設(shè)備上瀏覽時(shí)的縮放、移動(dòng)動(dòng)作。
二、非響應(yīng)式設(shè)計(jì)網(wǎng)站的呈現(xiàn)效果
如果沒(méi)有使用響應(yīng)式設(shè)計(jì)，網(wǎng)頁(yè)在手機(jī)版面上的呈現(xiàn)，可能會(huì)有變形的情況，導(dǎo)致用戶難以閱讀，以下是沒(méi)有套用響應(yīng)式設(shè)計(jì)網(wǎng)頁(yè)的范例：
可以看見(jiàn)，沒(méi)有響應(yīng)式頁(yè)面設(shè)計(jì)的網(wǎng)站，會(huì)讓手機(jī)版的頁(yè)面難以閱讀，使用者必須使用手指滑動(dòng)放大，造成不便。
三、響應(yīng)式網(wǎng)站設(shè)計(jì)中遇到表格該怎么處理
由于手機(jī)畫(huà)面太小，表格很難在手機(jī)上完整呈現(xiàn)。一般來(lái)說(shuō)，表格在響應(yīng)式頁(yè)面設(shè)計(jì)有兩種常見(jiàn)的做法。
1、套用表格CSS樣式?？梢圆捎帽砀耥憫?yīng)式效果的方式，但不論用哪種做法，在手機(jī)小小的屏幕中都很難完整呈現(xiàn)。從另一方面來(lái)說(shuō)，手機(jī)本來(lái)就不如電腦大屏幕可以用來(lái)瀏覽大量的資料，用手機(jī)只是用來(lái)快速查看資料。
2、直接把表格做成PDF文檔。對(duì)于太過(guò)復(fù)雜的表格（例：產(chǎn)品規(guī)格），建議直接做成PDF文件，在手機(jī)上可點(diǎn)開(kāi)PDF后，用手指滑動(dòng)放大查看資料。
四、響應(yīng)式網(wǎng)站設(shè)計(jì)與自適應(yīng)頁(yè)面設(shè)計(jì)的區(qū)別
自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)英文原文為 Adaptive Web Design（AWD），跟響應(yīng)式網(wǎng)頁(yè)（RWD）一樣，可在同個(gè)頁(yè)面根據(jù)適合屏幕的尺寸，呈現(xiàn)不同的視覺(jué)設(shè)計(jì)。在不同的設(shè)備開(kāi)啟網(wǎng)頁(yè)時(shí)，AWD 會(huì)先判斷屏幕尺寸是哪一種，來(lái)讀取不同的 CSS 文件，呈現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)排版。
相對(duì)于響應(yīng)式設(shè)計(jì)的網(wǎng)站，開(kāi)發(fā)和維護(hù)會(huì)更花費(fèi)心力。因?yàn)?AWD 需要為一個(gè)網(wǎng)站設(shè)計(jì)多個(gè) CSS，會(huì)增加工作復(fù)雜程度和開(kāi)發(fā)成本。由于自適應(yīng)網(wǎng)站開(kāi)發(fā)成本較高，現(xiàn)在響應(yīng)式頁(yè)面設(shè)計(jì)已經(jīng)可以做到自適應(yīng)可以做到的功能，所以 AWD 漸漸在市場(chǎng)中消失。
五、響應(yīng)式與自適應(yīng)網(wǎng)頁(yè)哪個(gè)對(duì)SEO比較好
Google于2020年9月已全面執(zhí)行“移動(dòng)端內(nèi)容優(yōu)先索引”，顧名思義，移動(dòng)端網(wǎng)站會(huì)成為Google優(yōu)先檢索及影響排名的依據(jù)。那么哪一個(gè)對(duì)SEO比較好？接下來(lái)請(qǐng)看我們?cè)敿?xì)的比較說(shuō)明。
1、避免重復(fù)內(nèi)容
由于自適應(yīng)網(wǎng)站設(shè)計(jì)采用手機(jī)版、電腦版兩個(gè)不同網(wǎng)址，對(duì)Google來(lái)說(shuō)，容易判定為有重復(fù)內(nèi)容的網(wǎng)站，因此自適應(yīng)網(wǎng)站需在手機(jī)版HTML注明“電腦版的對(duì)應(yīng)網(wǎng)址”，Google算法才能將電腦版和手機(jī)版網(wǎng)站區(qū)分開(kāi)來(lái)、各自收錄。而響應(yīng)式由于是同一個(gè)網(wǎng)址的同一個(gè)內(nèi)容，因此沒(méi)有這方面的問(wèn)題。
2、減少重新跳轉(zhuǎn)
自適應(yīng)因手機(jī)版、電腦版網(wǎng)址不同，在切換設(shè)備時(shí)，前端工程師通常會(huì)采用“重新跳轉(zhuǎn)”的方式，讓兩個(gè)版本的網(wǎng)站相互對(duì)應(yīng)、自動(dòng)轉(zhuǎn)換。但在SEO中，重新跳轉(zhuǎn)越少越好，較少的跳轉(zhuǎn)能避免導(dǎo)向到錯(cuò)誤的網(wǎng)址，或讓用戶等待時(shí)間過(guò)長(zhǎng)，導(dǎo)致較高的跳出率。
3、網(wǎng)頁(yè)載入速度
近來(lái)Google在網(wǎng)頁(yè)打開(kāi)速度加強(qiáng)算法上的權(quán)重，并不斷公開(kāi)表示網(wǎng)頁(yè)載入速度是決定自然排名、關(guān)鍵字廣告排名的要素之一。由于自適應(yīng)網(wǎng)站在開(kāi)發(fā)流程上是針對(duì)手機(jī)版的使用體驗(yàn)進(jìn)行開(kāi)發(fā)，因此可針對(duì)手機(jī)設(shè)備量身訂做HTML、JavaScript、CSS，讓手機(jī)版網(wǎng)站得到較佳的網(wǎng)頁(yè)加載速度。相比之下，響應(yīng)式網(wǎng)站必須把眾多平臺(tái)設(shè)備版本的HTML、JavaScript、CSS都在同一個(gè)頁(yè)面去執(zhí)行，文件較大，因此經(jīng)常需要代碼優(yōu)化、緩存、CDN等技術(shù)來(lái)加快網(wǎng)頁(yè)打開(kāi)速度。
4、節(jié)省 Google 爬取網(wǎng)站預(yù)算
Googlebot 會(huì)依照網(wǎng)站流量、更新速度、SEO 權(quán)重等 .. 多種因素，決定抓取這個(gè)網(wǎng)站的頻率，要撥多少“ 預(yù)算 ”給該網(wǎng)站，這就是爬取預(yù)算。Googlebot 會(huì)自動(dòng)讀取手機(jī)版和電腦版網(wǎng)頁(yè)，并且分別出相似內(nèi)容，以及避免誤判重復(fù)內(nèi)容問(wèn)題。
但一個(gè)內(nèi)容網(wǎng)頁(yè)，有 2 種以上版本，會(huì)花費(fèi)更多 Googlebot 更多的爬取預(yù)算在不同版本，這也是為什么 AWD 自適應(yīng)設(shè)計(jì)，正在逐漸減少的原因。如果網(wǎng)站規(guī)模過(guò)大，像是擁有許多網(wǎng)頁(yè)、更新頻率越高，像是電商平臺(tái)、新聞媒體等類型網(wǎng)站，就會(huì)產(chǎn)生不小的影響。