建站知識(shí)

你是否曾有過(guò)這樣的體驗(yàn)，使用手機(jī)瀏覽網(wǎng)頁(yè)時(shí)發(fā)現(xiàn)它是呈現(xiàn)電腦版頁(yè)面，需要不斷地縮放才能看清內(nèi)容。現(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)致用戶難以閱讀，以下是來(lái)自 DequeUniversity 制作的沒(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ì)中遇到表格該怎么處理