跨平臺響應式前端框架技術的應用

何 莉

（長江職業學院 湖北 武漢 430074）

0 引言

在當今的網站登錄與網頁瀏覽中，用戶不僅可借助PC端來實現，同時也可以借助平板、手機等移動終端來實現。移動終端主要的系統有兩個，其一是Android系統，其二是iOS系統。因此，在相關網站的設計與開發中，如果分別按照不同的系統來進行設計與適配，后期的應用、管理和維護都將面臨很大的困難，且需要大量的成本消耗。為有效解決這一問題，在具體的網站設計中，就需要將跨平臺響應式的前端框架技術加以合理應用，以此來解決傳統網站設計與運維過程中面臨的難題。

1 跨平臺與前端概述

1.1 跨平臺

在軟件開發過程中，跨平臺是一個最為重要的概念，它指的是不將操作系統及硬件環境作為依賴而實現的一種軟件開發模式。其主要特征是在一個操作系統中對相應的應用進行開發，當這個應用被放入到另一個操作系統之后，它依然能夠正常運行。就廣義來看，普通形式的計算機語言都能夠達到跨平臺效果，具體應用中，開發商僅僅需要將各種平臺條件下的Runtime中間件環境提供出來即可。但是就嚴格意義來看，跨平臺指的是通過某些計算機語言來進行的程序編制，在這個程序應用到另一個平臺時，只需要對其做少量修改，便可在翻譯之后實現正常運行，且并不需要進行Runtime中間件環境的提供。比如，當今Java便是一種Runtime環境提供的跨平臺方案，而C語言則是一種嚴格且標準的跨平臺語言形式。

1.2 前端

前端就是網絡應用程序中的前臺頁面，當我們將一個網站打開時，所能看到的全部頁面都屬于前端。借助于前端，用戶可實現與網絡應用程序之間的交互。通常情況下，前端頁面都需要前端工程師來進行設計與制作。在前端設計中，主要的技術包括HTML、JavaScript、CSS等，同時也包含一些技術框架和延伸拓展出的小程序。另外，在前端設計中，也需要應用到后端開發所提供的動態數據或者API數據，同時也包含著一些數據代碼。具體設計中，應根據實際的應用程序設計標準及其應用需求來進行相應技術的合理選擇。

2 響應式前端及其設計概述

2.1 響應式前端的主要組成部分

在響應式前端，其主要的組成部分包括以下5個。

（1）流體網格。也就是借助于一個簡單的網格系統來進行各個格子的應用百分比單位控制，以此來實現網格大小的合理控制，其主要優勢在于網格可按照用戶端的屏幕大小來實現自身比例的科學縮放。

（2）彈性圖片。所謂彈性圖片，就是并不對圖片進行固定的尺寸設置，而是使其按照流體網格的縮放來呈現出不同的尺寸。具體設置中，其實現代碼為：

但是在具體的設置過程中，因為IEB會導致圖片顯示失敗，所以為實現圖片的正常顯示，則需要將hack樣式加設到IEB中。

（3）CSS3 Media Queries。在響應式設計中，它是一個最為關鍵的應用部分，通過CSS3 Media Queries的應用，可讓客戶端顯示出的文件樣式和屏幕規格、瀏覽器窗口大小以及瀏覽窗口方向做到良好適應。

（4）屏幕分辨率。所謂的屏幕分辨率，指的就是屏幕橫縱方向上排列的像素點個數，比如，在分辨率為1 920像素×1 080像素的設備中，其橫向可排列1 920個像素點，縱向可排列1 080個像素點。在屏幕尺寸相同的情況下，分辨率越高，呈現出的界面也就越清晰。

（5）主要斷點。這一部分主要是為min-width以及max-width提供相應的服務。

2.2 響應式前端的關鍵設計步驟

在對響應式前端進行設計的過程中，為實現其應用效果的良好保障，技術人員一定要嚴格按照既定的步驟來進行設計。就目前來看，在響應式前端的具體設計中，其關鍵的步驟有3個。

（1）對meta標簽進行設置。具體設計中，需要將設備寬度用作視圖寬度，將系統默認的頁面自適應效果以及縮放效果禁止。因為IE6～IE8瀏覽器并不能對響應式設計提供支持，所以需要通過media-queries.js.或者respond.js.插件的增設來為其提供支持。具體設置中，其代碼如下：

（2）進行HTML MarkUp的設置。通常情況下，其基礎內容包括頭部設置、導航設置、內部設置以及頁腳設置等。

（3）媒體查詢。具體查詢中，主要包括以下幾方面：①通常情況下，需要采用max-width以及min-width對各種設備進行分辨率大小的檢查；②對于蘋果產品，主要可借助于dec=vce-width來進行設備寬度檢查；③在獨立樣式表的調用過程中，其常用的模板包括 iPhone和smartPhone、iPad豎屏、iPad橫屏、1 024 px顯示屏；④關于大屏幕、中屏幕以及小屏幕，具體查詢中，可通過如表1方式來進行劃分。

表1 大屏幕、中屏幕以及小屏幕的劃分方式

通過這樣的方式，才可以讓響應式前端得到合理設計，以此來充分滿足其實際的應用需求，讓相應的技術發揮出充分的應用優勢。

3 關鍵技術分析

3.1 HTML5跨平臺語言

在移動互聯網時代背景下，HTML5這一跨平臺語言的應用優勢越來越顯著，同時也成了PC端、Android、iPhone、Mac、iPad以及Windows Phone等各大主流平臺中唯一被廣泛應用的跨平臺語言[1]。無論是從開發者角度還是用戶角度來看，這種跨平臺語言都是手機APP開發中的最佳選擇。

3.2 響應式布局

所謂響應式布局，就是可以在通過各種設備終端進行網頁瀏覽的過程中，其展示模式可以按照設備的具體分辨率來自動調節。通過該技術的應用，可以讓相應的APP與各種移動設備之間達到更好的適配效果，以此來增強用戶的應用體驗。

3.3 Bootstrap框架

為了讓前端響應式布局得以快速設計，越來越多的前端框架開始出現，尤其是Bootstrap框架，更是具有非常顯著的應用優勢。通過該框架的應用，可以讓設計者根據標準規范來進行一整套方案的設計，在此過程中，設計者并不需要從最底層開始進行設計，只需要選擇需要的樣式視口、布局以及空間樣式等，便可對相應的接口、函數以及類型等進行直接調用。這樣的設計方式不僅可以讓開發者更少地進行代碼編寫，實現開發效率的顯著提升，同時也可以讓后續的網站運維變得更加簡單。

就目前來看，Bootstrap框架依然是最為流行的一種前端框架形式，該框架主要由Twitter發布，且能夠免費應用。Bootstrap框架是以HTML框架、CSS框架以及JavaScript框架為基礎而開發出的一種CSS/HTLL框架形式。這種框架形式自提出以來就受到了軟件開發工程領域的廣泛關注與歡迎，且在GitHub上一直都屬于一種最為熱門的開源項目。因此，將該框架應用到本次所研究的跨平臺軟件系統中，便可有效滿足該系統的實際應用需求，達到良好的跨平臺登錄與操作效果。

4 框架設計分析

4.1 前端框架設計需求的確定

本次所設計的是一款教師授課評價系統，該系統的主要設計目標是既可以在PC端登錄，也可以在智能手機終端登錄，并保障該系統中所有模塊和功能在各種終端上的應用和展示效果。因此，在具體的框架設計中，其主要需求包括以下幾個方面：（1）該系統應屬于一個面向PC端以及移動智能終端的中小型網站，其頁面數量不能太多。（2）該系統可能會有相應的需求變更。（3）該系統應該對IE9以上所有瀏覽器做到有效兼容，可對主流框架予以應用。除此之外，在對前端框架進行選擇的過程中，設計者也應該充分考慮到其可讀性、可維護性、可拓展性和協同性等各項標準，這樣才可以實現前端框架的合理選擇，使其滿足實際應用需求。出于這些應用需求的考慮，本次系統設計中，選擇了Bootstrap這一主流框架。

4.2 前端框架結構分析

在該系統的具體設計中，首先需要將Bootstrap庫文件以及視口代碼引入，通過這些文件的訪問，才可以讓響應式頁面達到自適應效果，并對Bootstrap、jQuery樣式以及jQuery中的JS庫進行加載[2]。在JS庫以及CSS庫的支持條件下，可以將前端代碼按照3個部分來進行劃分，第1是組件樹，第2是功能模塊，第3是各種資源，見圖1。

4.3 響應式框架布局的實現分析

4.3.1 視口設計分析

具體設計中，要想讓頁面的顯示效果與各種設備的顯示屏幕大小相適應，首先需要對各種設備實際的顯示寬度進行獲取。在此過程中，可借助于HTML5中的新增viewport對設備寬度進行獲取，然后做好頁面的合理縮放，且在固定之后，需要通過頁面文件頭部的視口代碼設置來組織用戶重新進行縮放。

4.3.2 媒體查詢以及流式布局分析

媒體查詢是一種以CSS3為基礎的新特征，其主要作用是對瀏覽器具體的尺寸變化進行監測，進而使Web響應式設計得以完美實現，讓相應的顯示頁面在PC端、平板、手機端等各種設備中達到良好的自適應效果[3]。在此過程中，需要將各種設備的實際寬度作為依據，分別對閾值對應的CSS布局樣式進行設置，再借助于媒體查詢技術@media來實現頁面和設備之間的良好匹配，而通過各種CSS的調用，便可達到對各種設備自動適應和匹配的功能。

4.3.3 圖片自適應設計分析

在具體的響應式設計過程中，設計者也應該足夠重視圖片的應用。因為在很多的移動設備上也會涉及一些圖片的上傳和制作等，使其與該網站相匹配，但是如果僅僅通過圖片壓縮的方式來進行處理，便會導致圖片失真，進而對用戶的應用體驗造成不良影響。因此在具體的設計中，設計者也需要將圖片的自適應設計作為重點。

5 響應式前端的頁面設計分析

在本系統設計中，選擇的框架模式為前端與后端分離形式。在該系統的前端界面上，主要顯示的是管理員信息維護、教師登錄驗證、聽課記錄的錄入、列表維護、查詢、統計等。具體設計中，將Microsoft Windows平臺7以及Apache平臺用作該系統開發中的主要平臺；將HBuilder工具、MySQL工具以及PHP工具用作該系統的主要開發工具；將PHP5.0以上的服務器、Apache2.4服務器以及MySQL 5服務器組件中的Windows Server 2003以上版本中的Windows Server平臺或者Linux平臺安裝在該系統的服務器端，并確保其良好運行[4]。

具體應用中，管理人員主要負責對系統中的用戶進行管理，包括用戶的編輯、刪除、添加和密碼修改。在管理人員完成了操作之后，可在保存了操作結果之后選擇“安全退出”，見圖2。

在教務人員登錄的過程中，系統會對其身份進行確定。在確定了教務人員身份之后，系統便會跳轉到功能界面中，教務人員可根據實際需求來進行個人信息管理、記錄查詢、記錄添加、密碼修改以及安全退出等操作，見圖3。

在該系統中，登錄的員工可以按照教務人員和普通教師進行劃分，登錄過程中，可直接通過賬號密碼輸入的形式完成登錄。在普通教師工作界面中，并沒有記錄查詢以及統計分析這兩個權限，但是教務管理人員擁有這兩個權限。通過這樣的方式，便可為教務人員對各個教師每個月的聽課信息情況查詢與相應的數據分析提供足夠便利[5]。

具體應用中，無論是通過PC端登錄，還是通過移動智能終端登錄，系統都會對設備屏幕的實際寬度進行自動識別，然后根據其實際的顯示模式以及分辨率來實現展示頁面的合理調整，以此來達到良好的跨平臺響應效果，為用戶帶來最佳的應用體驗。

6 結語

綜上所述，隨著當今網絡信息技術的不斷發展與各種移動終端的不斷更新，跨平臺響應式框架技術在網站開發中所發揮的作用也越來越顯著。通過該技術的合理應用，不僅可以讓網站的開發和運維變得更加簡單便捷，同時也可以為用戶的網站登錄與瀏覽提供足夠的便利，有效解決網站在PC端和移動智能終端不兼容的問題，以及網站在Android系統與iOS系統中不兼容的問題。這樣才可以有效適應當今時代科技的發展，滿足不同用戶的實際應用需求，避免不同設備對于網站登錄和網頁瀏覽的限制，為用戶帶來較好的應用體驗。