探究響應式網頁設計的發展范文

本站小編為你精心準備了探究響應式網頁設計的發展參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。

摘要：在當前數字革命時代，有不同屏幕的設備很多大小。這為網頁開發增加了一層額外的復雜性。網站現在必須在不同設備上呈現類似的體驗。解決這個問題，它需要一個設計解決方案。這個解決方案被稱為響應式設計。

關鍵詞：響應式網站；媒體查詢；彈性布局；切換式推出型導航

2010年，EthanMarcotte首次發表了關于響應式網站設計的文章。如其他新技術一樣，響應式網站設計一開始并不被人接受，許多人不斷辯稱——甚至于現在某些人還在這么做——我們需要為手機單獨創建網站。但隨著今天市場上設備的激增，很明顯，我們不能依賴于一種手機模型并將其作為設計標桿。我們的設計要能夠適應所有設備，而這些設備的屏幕尺寸各不相同。而與此同時，響應式設計也在不斷發展。它不再僅僅是適應屏幕尺寸，也能適應不同的設備性能，如觸摸屏、視網膜顯示屏，以及慢速連接。我們有令人驚嘆的硬件設備，而響應式設計能幫助我們充分利用各類設備。響應式網站設計一開始只是設計簡單的、注重內容的站點(不依賴CSS或JavaScripi)，使其能顯示在幾乎所有的聯網設備上。在此基礎之上，這種設計通過漸進式增強——響應式網站設計正是基于此——針對具體的顯示屏尺寸以及設備功能進行優化。因而，功能手機(也即功能有限的舊式手機)只能獲得那些它們能使用的內容，而相對來說較新的智能設備所訪問的網站則具有豐富的設計、完美適配其屏幕的界面，設備功能被充分利用。響應式網站設計使我們有能力為所有用戶呈現最好的網站，而不管他們具體使用什么設備。

1彈性布局

網頁設計中的彈性布局是使用相對度量單位指定頁面的寬度。頁面內容調整大小以適應瀏覽器窗口顯示的大小或頁面上使用的字體。無論您的瀏覽器窗口多大，都應調整大小以填充瀏覽器窗口。例如，如果您的瀏覽器窗口打開為1024像素的寬度，則右列應該向右延伸至窗口的右側。展開瀏覽器窗口，使其現在變成1200像素寬，您將再次看到瀏覽器調整主要內容以填充額外空間。在限制范圍內，如果縮小窗口寬度，內容也應該縮小，以便您不必水平滾動以閱讀文章。這樣的頁面布局被稱為“彈性”布局，其拉伸或縮小以根據其大小填充瀏覽器窗口。這種布局的其他名稱包括“液體”或“流體”布局，因為頁面擴展自身以便像液體擴散一樣填充瀏覽器窗口的寬度，以便在灌注到容器中時填充整個表面。彈性布局是通過使用em或百分比這樣的相對單位來完成的。em基本上是在頁面上使用的字體的高度。它被認為是相對的，因為16點字體與12點字體有不同的高度。百分比具有你習慣數學的正常含義。也就是說，如果頁面的寬度設置為80％，則意味著它可以具有的最大寬度的80％。它被認為是相對的，因為最大寬度取決于瀏覽器窗口的大小。

2媒體查詢

網頁設計重拾流式布局的理念，使用基于百分比的寬度，并設法讓其成為一種適用于小型移動設備的解決方案。使用百分比而不是像素使得網頁及頁面各部分都能夠自動改變寬度來適應任意屏幕尺寸，因此也就很容易地消除了相似尺寸設備之間的差異。但是一旦你縱觀所有的設備，就會有這樣一個問題。如果要縮窄三欄的布局以應用于智能手機的屏幕寬度，那么各欄中的文本會變得窄而長，難以閱讀。同樣，單欄布局在智能手機屏幕上看起來是蠻好的，但要想在桌面顯示器上輕松閱讀則顯得太寬了。本質上，這個問題是：不創建多個單獨的站點，如何使一個網站能夠在窄屏上以單欄顯示，而在大屏上以多欄顯示？如何根據瀏覽網站的設備的特性來要瀏覽器變換網頁的布局?這就需要媒體查詢。CSS的@media規則允許你根據設備特性而顯示不同的CSS樣式，這實際上在十多年前的CSS2中就有了，但當時它只支持查詢媒體的類型，這通常只能用于為網站設計創建一個打印版。直到CSS3對媒體查詢制定了規范，才能夠基于媒體(設備)的寬度、高度和色彩性能等特性執行更精確的查詢。媒體查詢不影響HTML，只影響使用CSS后應用到頁面的樣式。瀏覽器在2009年前后開始支持CSS3媒體查詢。媒體查詢可以做什么呢？舉個基本的例子，假設我們有一個網站，有兩塊各自獨立的內容。我們可以創建一個很適合智能手機的單欄設計，以垂直堆疊的方式顯示兩塊內容。而在更寬的屏幕上，我們可能想要以并排的兩欄來顯示這兩塊內容。使用媒體查詢，我們可以詢問設備屏幕有多寬，然后告訴瀏覽器僅在屏幕具有足夠寬度時，才以兩欄來顯示內容。要用代碼來實現這種效果，我們在開始只是用CSS將內容顯示在一欄中，然后再添加一條CSS媒體查詢，詢問屏幕寬度是否大干等于40em。之后我們會在這條媒體查詢中添加CSS樣式將內容顯示在兩欄中。瀏覽器僅在該媒體查詢結果為真時(即如果屏幕寬度大干等于40em)才使用此CSS樣式。如果屏幕寬度小于40em，它會忽略此CSS樣式，內容保持在一欄中。因此，我們可以針對不同的屏幕尺寸使網站變換為不同的布局，而無需創建單獨的網站。通過使用媒體查詢，我們可以隨心所欲地改變網站的樣式，不僅僅是欄數。媒體查詢可以移動內容，改變文字的大小，隱藏或顯示內容塊，調整邊距和空白，以及調整其他的CSS樣式。

3響應式框架

隨著響應式網頁的興起，各種響應式框架遍接連涌出，它們的出現提高的網頁設計師的工作效率，能更好的使得網頁設計師專注于網站個性化的開發工作。筆者在此以目前最為流行的Bootstrap為例，簡單介紹框架的使用的原理。Bootstrap前身是TwitterBootstrap,它是一個完全基于響應式的框架，通過其提供的文件可以快速的部署一個響應式網站。首先，引入bootstrap.css和bootstrap-responsive.css兩個css文件，然后引入jquery-latest.min.js和bootstrap.css兩個js文件。在網頁中，需要先添加一個css類為container的div標簽，它是用于控制其子元素響應式寬度的可以重復使用的布局元素。然后在contain中添加一個類為hero-unit的div。Bootstrap使用row類來控制div的寬度，在這行中，可以把網頁分成12列。boot⁃strap的響應式菜單是放在頂部的button類，它是個響應式元素，只會顯示在寬度較窄的手機版網頁中，當該元素被單擊的時候，會顯示其移動版的菜單欄目nav-collapse,當然這還需要使用一些javascript技術來實現按鈕的操作?？蚣芴峁┑牟季謺赃m應各類設備，每行中的內容都會占據特定的列寬，在移動設備中為縮小為單列，便于移動用戶瀏覽。Bootstrap還有其他功能，包括動畫特性等，由于篇幅有限，不再展開介紹。

4響應式設計的實際應用

響應式并不是完美的，但是經過時間檢驗和網頁設計師們的完成，已經趨向成熟和完善。國外IT巨頭率先嘗試響應式網頁設計，如：Apple，IBM,HP,Google，YouTube,microsoft都先后采用響應式網頁技術對自己的網站進行了改版。而在國內，如華為、三星中國、微軟中國等業界巨頭也采用了響應式網站設計。然而，像京東、淘寶等大型網站并沒有采用響應式網站設計。其原因是響應式設計并不適合所有網站。使用響應式設計最有說服力的理由是，你創建的網站不僅在現今市場上的各種設備上都能正確地工作并有良好的顯示效果，而且很可能在將來出現的那些新設備上也能如此。此外，使用響應式設計，你不會冒用戶可能在桌面顯示器上瀏覽移動版站點的風險，同時，一個網站更易于管理：從開發人員的角度來看，為不同的設備管理單個代碼庫更容易。用戶會有更好的體驗，使用響應式設計，可以展現更好的內容，包含使用適當的圖像。反之亦然。如果你有多個獨立的站點，那這無疑會成為一個問題，無論你是通過設備檢測來發送正確版本的站點給每個設備，還是使用一組單獨的URL(比如一個m-dot子域名)供移動版網站使用。如果網站有一個單獨的移動版本，通常會使用設備檢測(其發生在網站服務器，且在頁面顯示之前)來確定應該將哪個版本的網頁:移動版或桌面版發送給任一特定的設備。這樣，站點中的每個頁面雖然只有一個URL，但實際上存在兩個不同版本的HTML頁面。同樣，響應式網頁也有自身的缺陷，為了兼容各種瀏覽器，響應式設計會有很多的冗余代碼，也就是所謂hack。另外將一個功能豐富、結構繁雜的電商平臺改成響應式網頁也是不合理的。不僅如此，將大量內容顯示在手機上也是影響手機訪問速度。所以，復雜的頁面不太適合響應式網頁設計方案。隨著WINDOWSXP逐漸退出歷史舞臺，IE9+瀏覽器和以webkit為核心的瀏覽器(如chrome，360極速，獵豹，搜狗，qq，百度瀏覽器等)已經占據瀏覽器絕大部分市場份額。越來越多的網站選擇成為響應式。

5結束語

響應式網頁設計從誕生開始，一路走來，經過了諸多國內外設計師的努力，已經逐漸完善。另外，隨之w3c對瀏覽器標準的一次次更新，微軟ie瀏覽器也愈發向著標準看齊，使得響應式網頁設計在國內也開始變得活躍起來。本文介紹了響應式網頁設計的關鍵技術，并闡述了響應式布局的優缺點和國內外的發展情況。

參考文獻：

[1]EthanMarcotte.移動優先與響應式Web設計[M].司徒卓恒,譯.人民郵電出版社，2014.

[2]吉倫沃特.靈活Web設計[M].李靜,等,譯.機械工業出版社，2009.

[3]BenFrain.響應式Web設計———HTML5和CSS3實戰[M].王永強,譯.人民郵電出版社，2013.

[4]張賀,陳錦昌.基于響應式的移動門戶網站構建[J].現代計算機,2015(4):68-71.

[5]謝輝,等.基于響應式Web的農業網站設計方法研究[J].安徽農業科學，2016(2):330-334.

[6]吳多智,陳益全.響應式網頁設計案例實現與分析[J].安徽電子信息職業技術學院學報,2016(2).

[7]張坤.響應式設計分析及其與web應用程序的對比研究[J].攀枝花學院學報，2016(2):29-31.

[8]胡佳鋒.新媒體Web技術的研究與實現[D].北京：中國地質大學,2016.

作者：朱曉 單位：上海工商信息學校