響應式布局在Web前端開發(fā)中的使用

◆李娟麗

（運城學院 山西 044000）

傳統(tǒng)Web前端開發(fā)均是基于一種特定設備進行設計的，各個元素的尺寸固定不變，導致所設計的頁面在電腦端和手機移動端設備上進行呈現(xiàn)時，所顯示的效果存在很大的差異，嚴重影響了用戶的使用體驗。而響應式布局的出現(xiàn)和應用，可以很好地解決這一問題，通過將響應式布局科學應用于Web前端開發(fā)中，確保所設計的網(wǎng)頁適用于不同大小的屏幕，極大地提高了頁面開發(fā)的效率和效果，同時，為用戶帶來良好的使用體驗。

1 響應式頁面

響應式頁面主要是指針對用戶行為一級系統(tǒng)平臺、屏幕大小等設備環(huán)境，設計出具有自適應功能的頁面，以達到提高用戶操作體驗和視覺體驗的目的。這種響應式頁面的出現(xiàn)和應用為提高網(wǎng)頁開發(fā)效率，降低開發(fā)成本打下堅實的基礎。

2 基于響應式布局Web前端開發(fā)流程

現(xiàn)階段，比較流行的Web開發(fā)模型均是在參照瀑布模式的基礎上進行修改得到的，通過利用響應式布局，構(gòu)建出如圖1所示的Web前端開發(fā)流程。

圖1 基于響應式布局Web前端開發(fā)流程

2.1 計劃分析與總體設計

在傳統(tǒng)開發(fā)模式下，其開發(fā)框架圖主要由以下兩個部分組成，分別是布局和組件，其頁面尺寸通常是固定不變的，沒有任何可調(diào)整的空間和余地，一旦用大小不同的屏幕進行顯示時，很容易出現(xiàn)橫向滾動條或者空白區(qū)域，導致整個頁面布局發(fā)生極大的改變。但是，響應式布局的出現(xiàn)和應用可以很好地避免以上不良現(xiàn)象的出現(xiàn)，通過將響應式布局科學應用于Web前端開發(fā)中，可以確保布局尺寸多樣性[1]，使得所設計的頁面能夠更好地適應于不同分辨率尺寸屏幕。頁面布局主要包含以下三種，分別是三列、兩列和單列。總之，響應式Web前端頁面設計是設計出不同尺寸的組件和布局，從而更好地顯示于不同大小的屏幕上，提高用戶的使用體驗。整個頁面的三大要素主要包含滾動條、文字內(nèi)容和表單。在進行計劃分析期間，Web開發(fā)人員除了要考慮相關設備控制需求外，還要綜合考慮平板電腦、移動手機的觸屏和控制效果。

2.2 具體開發(fā)與測試

在響應式布局的應用背景下，所開發(fā)的Web前端頁面具有一定的靈活性。各種組件可以被靈活地融入到布局中。所以，在最初設計階段，可以忽略對各種組件的整體規(guī)劃。但是，在實際的開發(fā)中，開發(fā)人員要對設計好的組件進行全方位測試[2]，確保所有組件代碼始終處于優(yōu)化狀態(tài)。此外，策劃者、設計師與開發(fā)者之間要建立起良好的合作關系，只有這樣，才能有效地避免因出現(xiàn)不必要的修改而引發(fā)一系列的問題，同時，也能在第一時間內(nèi)快速地分析和解決移動環(huán)境與框架圖之間的不匹配問題。精確測試主要包含頁面可訪問性、導航功能正常性以及表單的可用性等。對于小型屏幕設備而言，要將全局導航進行集中化壓縮處理，然后，對其進行可折疊式設計，使得整個頁面成功跳轉(zhuǎn)后能夠在首屏上顯示所有主要內(nèi)容，從而提高的使用體驗。

2.3 完善與修改

在進行響應式Web前端開發(fā)期間，為了保證整個頁面的開發(fā)效果，Web開發(fā)人員要向用戶提供動態(tài)代碼，并形象、生動地展現(xiàn)所有頁面的實現(xiàn)過程，一旦發(fā)現(xiàn)頁面出現(xiàn)跳轉(zhuǎn)錯誤、響應速度慢等問題，Web開發(fā)人員要盡快分析和處理這些問題，以實現(xiàn)對整個頁面的完善和修改。

3 響應式布局在Web前端開發(fā)中的具體應用

3.1 媒體查詢

W3C主要是指向媒體查詢模塊中添加相應的CSS3代碼，確保媒體查詢針對屏幕尺寸和比例，實現(xiàn)對頁面布局的自動化改變，Web開發(fā)人員在編寫頁面布局樣式時，僅僅考慮不同屏幕的分辨率即可，此時，網(wǎng)頁設備會結(jié)合自身的屏幕分辨率大小[3]，選擇一種合適的布局樣式顯示頁面內(nèi)容，以達到提高用戶瀏覽體驗的目的。簡單的MediaQueries代碼如圖2所示。圖2中的代碼主要來自Bootstrap框架，該框架是目前比較流行的前端框架。當網(wǎng)頁所顯示的瀏覽器超過1200像素時，容器所對應的展示效果為1170像素。此外，當可視范圍變?yōu)?92～1200像素之間時，容器所對應的展示效果為960像素。在設計Responsive期間，Web開發(fā)人員必須要做好對其寬度的調(diào)整和控制。

圖2 簡單的MediaQueries代碼

此外，系統(tǒng)會結(jié)合當前用戶所使用的設備寬度，自動加載相應的頁面布局樣式，以保證頁面風格的特定性。同時，通過利用CSS3內(nèi)的媒體查詢模塊，可以實現(xiàn)中容器寬度臨界點的科學調(diào)整和控制，常用設備分辨率的臨界值如圖3所示。

圖3 常用設備分辨率的臨界值

通過科學地利用斷點，可以確保頁面布局在所設置好的定點處發(fā)生相應的變形[4]，使得整個頁面在臺式電腦上以3欄的布局進行顯示，在移動設備上以單欄的布局進行顯示。通過靈活利用CSS屬性，可以保證斷點之間的變形效果。頁面內(nèi)容不同，斷點所放置的位置也存在一定的差異。例如：一句話要想成功實現(xiàn)換行，就需要設置相應的斷點，但是，斷點在實際的使用中，要理清不同內(nèi)容之間的邏輯關系，避免出現(xiàn)邏輯混亂局面。

3.2 動態(tài)布局

在媒體查詢技術的應用背景下，Web開發(fā)人員要針對當前屏幕的寬度，對頁面布局進行科學調(diào)整和控制，但是，這種改變存在一定的弊端，如果窗口恰好超過媒體查詢所設置的尺寸范圍，屏幕會自動顯示出水平滾動條[5]，極大地降低了用戶的視覺體驗效果。出現(xiàn)這種現(xiàn)象的根本原因是網(wǎng)頁內(nèi)容尺寸在具體的設計中使用了絕對單位，例如：使用像素對其進行定義。為了解決以上問題，需要利用動態(tài)布局理念，動態(tài)布局設計理念主要是指采用動態(tài)的方式，對整個頁面進行操作和布局。動態(tài)布局主要包含以下幾種類型。

3.2.1 百分比寬度

在傳統(tǒng)頁面中，所使用的table、div具有固定像素寬度的功能，當頁面出現(xiàn)放大或者縮小時，元素寬度是固定不變的，無法根據(jù)不同大小屏幕進行自適應顯示，極大地降低了用戶的視覺體驗。而百分比寬度的使用，可以根據(jù)不同大小屏幕[6]，自動調(diào)節(jié)頁面的布局樣式，以達到自適應顯示的目的，避免屏幕出現(xiàn)水平滾動條，在大屏幕上進行顯示時，頁面兩側(cè)也不會出現(xiàn)空白，在小屏幕上進行顯示時，頁面內(nèi)容不會被擠成一團。

3.2.2 彈性寬度（ElasticWidth）文字

像素px主要用于對顯示其屏幕分辨率的精確描述，em屬于比較常用的相對長度單位，可以對字體尺寸進行精確描述。如果當前文本字體尺寸沒有被設置，那么其字體尺寸會以瀏覽器默認的字體進行顯示，總之，em作為一種常用的測量單位，主要是指特定字母的尺寸與某一字體磅值之間的比例。現(xiàn)階段，Web開發(fā)人員通過靈活運用像素，科學控制和調(diào)整文本的尺寸，但是，屏幕不同，所對應的尺寸也存在一定的差異，如果將文本的尺寸單位設置為像素，那么該文本可能在某一設備上可以正常顯示[7]，但是，在另一臺設備上可能出現(xiàn)字體過大或者過小現(xiàn)象。像素值一旦被設定，通常是固定不變的，無法根據(jù)不同大小的屏幕自適應顯示。為了解決這一問題，Web開發(fā)人員可以在標簽內(nèi)的文字統(tǒng)一設置為100%大小，然后，將其他文字的尺寸單位設置為相對單位em，這樣做具有以下好處，如當Web開發(fā)人員成功完成對所有文字的排版設計后，如果客戶要求將頁面文字整體調(diào)大一點，此時，Web開發(fā)人員可以直接修改body標簽內(nèi)的文字大小即可[8]，而其他文字自動變大。這表明em與百分比之間存在一定的相似性，設置em單位的文字會按照一定的比例進行縮放。

3.2.3 彈性圖片（ElasticImage）

整個頁面圖像所采用的加載方式主要以原始寬度為主，與圖像原始寬度相比，當頁面可視部分寬度較低時，會導致圖像部分內(nèi)容被隱藏，為了避免以上不良現(xiàn)象的出現(xiàn)，Web開發(fā)人員要采用百分比寬度的方式，對圖像進行設計，確保該圖像的最大寬度遠遠低于所含元素的可視寬度，當調(diào)整屏幕分辨率時，圖像所對應的最大寬度會按照一定的比例自動縮放，以達到自適應不同大小屏幕的目的，這種圖像被稱為“彈性圖片”。例如：img{max-width：100%；}，可以實現(xiàn)對彈性圖片的設置。

4 結(jié)束語

綜上所述，在響應式布局的應用背景下，所開發(fā)的Web前端頁面幾乎適用于所有設備屏幕，為用戶提供舒適、友好的界面，同時，還有效地簡化了網(wǎng)站開發(fā)工作量和維護工作量，為縮小網(wǎng)站的開發(fā)成本，保證網(wǎng)站開發(fā)的高效性、規(guī)范性和科學性提供有力的保障。由此可見，響應式布局具有非常高的應用價值和廣闊的應用前景，值得被進一步推廣和應用。