資料庫程式設計
Database Programming

根據資策會FIND公佈最新調查結果顯示,國內12歲以上使用智慧型手機或平板電腦者已達到1600 萬人。調查也發現行動裝置不僅在中低年齡族群已經普及,連中高齡層普及率也在持續提升中,行動裝置不再只是年輕族群的專利,也逐漸走入中高年齡層人口的生活中。 而這些用戶在智慧型手機上最常使用的應用除了即時通訊、社群網站、遊戲、收發電子郵件外,地圖導航、搜尋旅遊資訊、網購、訂票也同步增長。而對網路及網站依存高的觀光旅宿業者,其網站若有針對行動族群做改版,將會是最大的受益者。

 「 RWD響應式網站 」 這名稱聽起來有點繞口,他的英文是「Responsive Web Design」簡稱「RWD」,中 文又稱自適應、適應性或回應式網頁設計,會有這麼多不同的中文名稱,是因為 Responsive Web Design 是因應智慧型手機及平板而大量運用的優勢技術,國外已經非常習慣用 RWD 響應式技術設計網站。在2015年開始,我們也開始陸續接到客戶主動來電告知要製作 RWD 響應式網站的需求,看來 RWD 的魅力終於要在台灣生根了。

RWD 響應式網頁是要「響應」什麼呢?簡單來說,響應式網頁設計就是透過 CSS3+JQuery 網頁技術,讓手機、平板、電腦網站使用同一網站的圖文內容及資料庫,在不同尺寸或解析度的設備或螢幕上,網頁程式會根據使用者的裝置,以符合版面大小的樣式來顯示網頁的內容。更簡單地說,RWD 響應式網站技術讓你可以只花一個網站的費用,讓電腦、手機、平板都可以正常瀏覽同一個網站,再也不需要用手指在面板上放大、縮小。

因為越來越多人要用手機、平板瀏覽網頁。行動上網的比例越來越高,這個現象不只出現在台灣,而是全球皆如此。 而以目前主流裝置的解析度來看,就有 8 種尺寸範圍,因此要讓每種裝置都能順暢瀏覽,不只考驗工程師的功力,也非常考驗前端網頁設計的視覺美感,與後端多螢測試的耐性。

早期的網頁設計預設對象大多以一般家用電腦或筆記型電腦的瀏覽者為主,所以在製作網頁時會以此規格為預計頁面的大小,然而隨著平板電腦及智慧型手機的普及,傳統的網頁設計方式已無法滿足所有的網頁瀏覽裝置,使用畫面較小的平板或智慧型手機來瀏覽傳統設計的網頁時,將會因為頁面寬度過寬而導致瀏覽者在瀏覽頁面時的不便,因此為了滿足手機瀏覽者的需求。

一般在進行網站製作時通常會再另外製作「手機版」的網站,以滿足這些族群的需求,然而手機版網站雖然可以解決大多數手機瀏覽網頁者的不便,但對於花錢進行網站建置的企業來說,將額外增加一個網站建置的成本。

為了解決這樣的窘境,現在有越來越多的企業選擇使用「響應式網頁設計 ( Responsive Web Design ) 簡稱 RWD」的技術來製作網站。 RWD 又稱自適應網頁設計、多螢式網頁設計或回應式網頁設計,簡單來說就是網頁會自已随著瀏覽者的網頁瀏覽裝置解析度的大小,自動變化網頁的寬度及頁面配置,讓瀏覽者能以最適合閱讀的格式呈現。 RWD 網頁原理是使用CSS3以百分比的方式來進行網頁畫面的設計,讓網頁在不同解析度下瀏覽時,能自動改變網頁頁面的佈局排版,因為此技術解決了目前智慧型手機及平板電腦瀏覽網頁的不便,所以RWD 網頁設計開發技術已成了新一代的網頁設計趨勢。

RWD ( Responsive Web Design ) 可稱為自適應網頁設計、響應式網頁設計、回應式網頁設計等等,是一種可以讓網頁的內容可以隨著不同的裝置的寬度來調整畫面呈現的技術,讓使用者可以不需要透過縮放的方式來瀏覽網頁,大大的提昇畫面的可瀏覽性及使用介面的親和度;然而這對於行動商務越來越受到重視的現今來說,隨之也越來越倍受重視。近幾年,隨著行動裝置(智慧型手機、平板)的普及,以及行動上網服務的使用率越來越高,傳統網頁的標準已經無法符合這些裝置的需求來呈現了,尤其是以flash製作的動畫,受限於行動裝置運算力不足的限制之下,已經沒有行動裝置可以直接瀏覽flash製作的網頁了。雖然可透過一些特殊的瀏器APP軟體來觀看,但方便性卻大大的降低。

而 RWD響應式又是如何達到的呢? 主要是以HTML5的標準及CSS3中的media queries來達到的。在HTML5的標準中,我們可以指定頁面的寬度可以依照裝置的檢視寬度來呈現,再利用CSS3的media queries 來設定不同寬度下使用不同的CSS來呈現頁面。因此設計師在設計網頁時,就必須要針對不同的寬度下的畫面編寫不同的CSS檔案供瀏覽器來讀取。

  • Faucibus orci lobortis ac adipiscing integer.
  • Col accumsan arcu mi aliquet placerat.
  • Lobortis vestibulum ut magna tempor massa nascetur.
  • Blandit massa non blandit tempor interdum.
  • Lacinia mattis arcu nascetur lobortis.