本發(fā)明屬于網(wǎng)頁(yè)設(shè)計(jì)技術(shù)領(lǐng)域，更具體地說(shuō)，尤其涉及一種漸進(jìn)增強(qiáng)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)方法。
背景技術(shù)：
如今，越來(lái)越多的人使用手機(jī)來(lái)瀏覽網(wǎng)頁(yè)、聊微信、qq、手機(jī)購(gòu)物、或使用各式各樣有關(guān)生活及娛樂(lè)的手機(jī)應(yīng)用。由于各種各樣的移動(dòng)設(shè)備開始出現(xiàn)在市場(chǎng)上，導(dǎo)致用戶訪問(wèn)的方式開始發(fā)生變化，相應(yīng)的網(wǎng)頁(yè)設(shè)計(jì)開發(fā)技術(shù)也隨之發(fā)生一些改變，可能設(shè)計(jì)師為了給一些使用移動(dòng)設(shè)備的用戶更好的訪問(wèn)體驗(yàn)而去專門設(shè)計(jì)一個(gè)網(wǎng)站，于是，一個(gè)專門為所有使用移動(dòng)終端的訪問(wèn)者而設(shè)計(jì)的網(wǎng)頁(yè)都被自動(dòng)跳轉(zhuǎn)。另一方面，如果把網(wǎng)站做成響應(yīng)式的情況下，無(wú)論客戶使用的是那種移動(dòng)終端設(shè)備訪問(wèn)，網(wǎng)站都會(huì)自動(dòng)調(diào)整顯示效果，讓每一個(gè)用戶得到更好的訪問(wèn)體驗(yàn)。響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)不僅能夠滿足各式各樣移動(dòng)終端設(shè)備的需求，更能讓每一個(gè)用戶都得到最佳的訪問(wèn)體驗(yàn)。然后，也有人認(rèn)為，專門為每一種移動(dòng)設(shè)備終端，比如說(shuō)電腦，ipad，手機(jī)各自設(shè)計(jì)一個(gè)專門的網(wǎng)站，但是，根據(jù)現(xiàn)有的相關(guān)數(shù)據(jù)顯示，被大家經(jīng)常用到的的移動(dòng)終端設(shè)備就有300多種以上，而我們的設(shè)計(jì)人員和開發(fā)人員不可能去設(shè)計(jì)300多種的不一樣屏幕尺寸大小的網(wǎng)站。在這種情況下，響應(yīng)式就表現(xiàn)出它的優(yōu)勢(shì)與價(jià)值。只需要設(shè)計(jì)一個(gè)的響應(yīng)式網(wǎng)站，就可以帶給不同終端用戶最優(yōu)質(zhì)的訪問(wèn)體驗(yàn)。
響應(yīng)式網(wǎng)頁(yè)是今后網(wǎng)頁(yè)設(shè)計(jì)新的發(fā)展方向。最近一些年，各種各樣的移動(dòng)互聯(lián)網(wǎng)技術(shù)得到了廣泛應(yīng)用和不斷升級(jí)，在對(duì)不同網(wǎng)站訪問(wèn)的媒介中，誕生了各種以智能手機(jī)、平板電腦等作為主要訪問(wèn)界面的移動(dòng)設(shè)備，但是不同設(shè)備的不同尺寸使得原本在電腦上能夠正常訪問(wèn)的網(wǎng)頁(yè)在這些移動(dòng)界質(zhì)上訪問(wèn)上顯得很紊亂，可能會(huì)造成操作不便或用戶視覺(jué)體驗(yàn)不佳的結(jié)果?；诖藢擂谓陙?lái)誕生的一一響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，其定義為根據(jù)用戶的個(gè)性化需求和應(yīng)用環(huán)境主動(dòng)做一系列裁減定制系統(tǒng)的顯示和交互行為。響應(yīng)式網(wǎng)站相比傳統(tǒng)網(wǎng)站而言，有更好的靈活適應(yīng)性，可以簡(jiǎn)化設(shè)計(jì)流程，代表了今后網(wǎng)站設(shè)計(jì)的新方向，目前越來(lái)越多的注重用戶交互體驗(yàn)的網(wǎng)站都積極尋求向響應(yīng)式網(wǎng)頁(yè)做轉(zhuǎn)變。
技術(shù)實(shí)現(xiàn)要素：
本發(fā)明的目的是為了解決現(xiàn)有技術(shù)中存在的缺點(diǎn)，而提出的一種漸進(jìn)增強(qiáng)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)方法。
為實(shí)現(xiàn)上述目的，本發(fā)明提供如下技術(shù)方案：
一種漸進(jìn)增強(qiáng)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)方法，包括如下步驟：
s1、首先設(shè)計(jì)一個(gè)非響應(yīng)的布局，即頁(yè)面寬度是固定的，然后設(shè)置頁(yè)面在不同尺寸的客戶端都按1∶1原樣顯示，即提供網(wǎng)頁(yè)全視圖瀏覽，禁止用戶縮放頁(yè)面；
s2、使用媒體查詢可以使網(wǎng)頁(yè)自動(dòng)適應(yīng)不同分辨率的終端；根據(jù)終端的屏幕尺寸和終端的特征劃分網(wǎng)頁(yè)源代碼服務(wù)范圍；
s3、根據(jù)上述繪制斷點(diǎn)圖，首先要確定斷點(diǎn)，然后在對(duì)應(yīng)的斷點(diǎn)下方繪制網(wǎng)頁(yè)布局縮略圖，表示當(dāng)視口大小達(dá)到該值時(shí)，將顯示該布局的效果；
s4、針對(duì)不同斷點(diǎn)確定響應(yīng)式css規(guī)則和javascript程序。
優(yōu)選的，所述斷點(diǎn)圖又分三種類型，分別是帶有布局縮略圖的斷點(diǎn)圖、帶有次斷點(diǎn)的斷點(diǎn)圖和展示css文件作用范圍的斷點(diǎn)圖。
優(yōu)選的，所述終端為手機(jī)或者平板電腦或者計(jì)算機(jī)。
優(yōu)選的，所述平板電腦橫向規(guī)格為1060px，手機(jī)屏幕規(guī)格為768px。
優(yōu)選的，當(dāng)媒體查詢檢測(cè)到平板電腦橫向規(guī)格時(shí)，頁(yè)面為左右顯示比例分別為65％和30％，預(yù)留有5％為邊距；當(dāng)為手機(jī)屏幕時(shí)，頁(yè)面左、右欄比例都是100％，以實(shí)現(xiàn)將左、右欄以全屏上下顯示。
本發(fā)明的技術(shù)效果和優(yōu)點(diǎn)：本發(fā)明提供的一種漸進(jìn)增強(qiáng)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)方法，自適應(yīng)于不同的設(shè)備，實(shí)現(xiàn)網(wǎng)站布局和內(nèi)容與設(shè)備特點(diǎn)匹配，提高網(wǎng)站性能和增強(qiáng)用戶體驗(yàn)。本發(fā)明以低分辨率設(shè)備為先，按設(shè)備分辨率增加，逐漸優(yōu)化網(wǎng)頁(yè)布局和內(nèi)容展示，建立流動(dòng)的網(wǎng)格，流動(dòng)的標(biāo)簽，靈活的斷點(diǎn)，并通過(guò)外部腳本選擇性增加內(nèi)容，實(shí)現(xiàn)布局和內(nèi)容自適應(yīng)于設(shè)備尺寸，減小不需要的頁(yè)面加載，優(yōu)化網(wǎng)頁(yè)展示效果；通過(guò)css規(guī)則和輔助的腳本控制，實(shí)現(xiàn)靈活的布局，對(duì)小尺寸設(shè)備，加載較少數(shù)據(jù)，展示最重要的網(wǎng)站信息。隨著設(shè)備尺寸增加，網(wǎng)頁(yè)布局能夠自適應(yīng)與設(shè)備屏幕，并通過(guò)選擇性的加載更多內(nèi)容到網(wǎng)頁(yè)源碼中，達(dá)到充分利用通信流量和優(yōu)化網(wǎng)頁(yè)展示效果的目的，可以優(yōu)化網(wǎng)站性能和提升用戶體驗(yàn)。
具體實(shí)施方式
為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合具體實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說(shuō)明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒(méi)有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。
一種漸進(jìn)增強(qiáng)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)方法，包括如下步驟：
s1、首先設(shè)計(jì)一個(gè)非響應(yīng)的布局，即頁(yè)面寬度是固定的，然后設(shè)置頁(yè)面在不同尺寸的客戶端都按1∶1原樣顯示，即提供網(wǎng)頁(yè)全視圖瀏覽，禁止用戶縮放頁(yè)面；
s2、使用媒體查詢可以使網(wǎng)頁(yè)自動(dòng)適應(yīng)不同分辨率的終端；根據(jù)終端的屏幕尺寸和終端的特征劃分網(wǎng)頁(yè)源代碼服務(wù)范圍；所述終端為手機(jī)或者平板電腦或者計(jì)算機(jī)；所述平板電腦橫向規(guī)格為1060px，手機(jī)屏幕規(guī)格為768px；當(dāng)媒體查詢檢測(cè)到平板電腦橫向規(guī)格時(shí)，頁(yè)面為左右顯示比例分別為65％和30％，預(yù)留有5％為邊距；當(dāng)為手機(jī)屏幕時(shí)，頁(yè)面左、右欄比例都是100％，以實(shí)現(xiàn)將左、右欄以全屏上下顯示；
s3、根據(jù)上述繪制斷點(diǎn)圖，首先要確定斷點(diǎn)，然后在對(duì)應(yīng)的斷點(diǎn)下方繪制網(wǎng)頁(yè)布局縮略圖，表示當(dāng)視口大小達(dá)到該值時(shí)，將顯示該布局的效果；所述斷點(diǎn)圖又分三種類型，分別是帶有布局縮略圖的斷點(diǎn)圖、帶有次斷點(diǎn)的斷點(diǎn)圖和展示css文件作用范圍的斷點(diǎn)圖；
s4、針對(duì)不同斷點(diǎn)確定響應(yīng)式css規(guī)則和javascript程序。
綜上所述：本發(fā)明提供的一種漸進(jìn)增強(qiáng)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)方法，自適應(yīng)于不同的設(shè)備，實(shí)現(xiàn)網(wǎng)站布局和內(nèi)容與設(shè)備特點(diǎn)匹配，提高網(wǎng)站性能和增強(qiáng)用戶體驗(yàn)。本發(fā)明以低分辨率設(shè)備為先，按設(shè)備分辨率增加，逐漸優(yōu)化網(wǎng)頁(yè)布局和內(nèi)容展示，建立流動(dòng)的網(wǎng)格，流動(dòng)的標(biāo)簽，靈活的斷點(diǎn)，并通過(guò)外部腳本選擇性增加內(nèi)容，實(shí)現(xiàn)布局和內(nèi)容自適應(yīng)于設(shè)備尺寸，減小不需要的頁(yè)面加載，優(yōu)化網(wǎng)頁(yè)展示效果；通過(guò)css規(guī)則和輔助的腳本控制，實(shí)現(xiàn)靈活的布局，對(duì)小尺寸設(shè)備，加載較少數(shù)據(jù)，展示最重要的網(wǎng)站信息。隨著設(shè)備尺寸增加，網(wǎng)頁(yè)布局能夠自適應(yīng)與設(shè)備屏幕，并通過(guò)選擇性的加載更多內(nèi)容到網(wǎng)頁(yè)源碼中，達(dá)到充分利用通信流量和優(yōu)化網(wǎng)頁(yè)展示效果的目的，可以優(yōu)化網(wǎng)站性能和提升用戶體驗(yàn)。
最后應(yīng)說(shuō)明的是：以上所述僅為本發(fā)明的優(yōu)選實(shí)施例而已，并不用于限制本發(fā)明，盡管參照前述實(shí)施例對(duì)本發(fā)明進(jìn)行了詳細(xì)的說(shuō)明，對(duì)于本領(lǐng)域的技術(shù)人員來(lái)說(shuō)，其依然可以對(duì)前述各實(shí)施例所記載的技術(shù)方案進(jìn)行修改，或者對(duì)其中部分技術(shù)特征進(jìn)行等同替換，凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。