企業網站建設:網站網頁設計響應式布局,Think PHP框架開發

  • 企業網站建設:網站網頁設計響應式布局,Think PHP框架開發已關閉評論
  • A+
所屬分類:網站建設公司

 

以前大部分網頁的頁面布局的模式均使用的是流式布局的模式。流式布局分為流式和靜態布。靜態布局設計頁面簡單、開發便捷、易于維護, 但樣式、元素大小固定, 只能適應于PC端。流式布局的核心是頁面布局的尺寸和元素的尺寸都采用比例的尺寸, 也就是使用百分比來設定頁面以及頁面元素的大小。

我們以2017年本院的創新創業項目的前端響應式頁面的設計為案例, 充分展現了將響應式頁面布局的設計與實現。

網站后臺用目前流行的Think PHP框架開發的, 基于MVC模式的TP最大的優勢在于將視圖、業務、模型三層獨立分開, 當需求發生改變對網站的改動可以降到最低程度, PC端網站需要增加響應式移動網頁時, 只原有的網站添加視圖層的前端頁面, 然后在PC端判斷是否移動設備來跳轉。

前端的布局采用bootstrap的柵格式網格系統, 將頁面分成12等分, 在每個尺寸的屏幕上都可以適應。圖片用了bootstrap所帶的<style=’img-responsive’>屬性, 可以使圖片自適應, 它的原理相當于流式布局, 利用百分比將網頁分割, 分成幾個尺寸lg、md、xs等, 針對的寬度是1170px、970px、750px等。在不同屏幕尺寸使用的是不同的網格樣式, 這里就運用了媒介查詢。

通過上面對響應式布局的解釋, 下面將展示佳益網站首頁部分功能在電腦端和手機端不同的布局方式。

1 導航條

從電腦端導航條和手機端導航條兩張圖片中, 可以看出在這兩個不同的終端中, 導航條以不同的形式展示出來。在電腦終端, 導航條以水平排列的形式展示, 而在手機移動終端則是先以按鈕的形式展示, 點擊按鈕則會出現導航條下拉菜單如圖3所示。

企業網站建設:網站網頁設計響應式布局,Think PHP框架開發 企業網站建設:網站網頁設計響應式布局,Think PHP框架開發

這正是利用了CSS3中的Media Query (媒介查詢) 這個標簽屬性, 使導航條在不同分辨率下有不同的展示形態。網站的導航條就設置了當界面寬度小于或等于750像素時, 隱藏原有的導航條形成按鈕。同理, 在電腦終端對瀏覽器進行擴大和縮小操作時, 頁面也會自適應瀏覽器當前的界面大小。

2 日歷提示和節氣提示

日歷和節氣的布局一樣用到了Media Query (媒介查詢) , 當界面處于電腦終端寬度較大時, 日歷所處在的框架和節氣所處在的框架所調用的樣式屬性使他們浮動處在同行, 當頁面縮小至手機移動終端大小時, 日歷框架所調用的屬性使日歷框架占用整個界面的寬度, 而致使節氣框架整體下移, 形成上下排列的布局。電腦終端界面伸縮的情況與導航條相同。

企業網站建設:網站網頁設計響應式布局,Think PHP框架開發3 結束語

本文詳盡的研究了響應式布局頁面實現的相關技術及分析了各種實現方式的優缺點, 最后, 主要以bootstrap的框架來對網站前端自適應的實現來詳盡的闡述了實際用法。

此項研究, 我們可以得出相關結論:響應式布局幫助開發者在PC和移動設備同時兼備的情況下減少了代碼的工作量, 但也帶來了加載慢, 相比于單獨的PC或者移動網站代碼量大, 而且如今移動設備屏幕分辨率的不斷改變, 已有的響應式布局難以完全適應到各種設備, 所以在選擇獨立開發移動網站還是開發兼容PC和移動端的網站需要根據實際情況來分析。在我們目前的實踐中來看, 條件允許的話, 將PC和移動網站分成獨立會好點, PC端網站可以做部分響應式, 但不能追求能滿足大多數設備。若要完成響應式頁面的設計, 相比頁面重組而言, 利用bootstrap等相關的框架, 更容易完成我們的目標頁面。

當然, 我們的實踐還不夠完善, 不足以說明我們的觀點是正確的, 因為網站需要考慮的還有性能, 兼容性等各種問題, 所以我們會繼續學習, 進一步研究響應式布局的實用性。