innstory

Responsive Web Design使用CSS3的Media Queries進行自適應網頁設計

智慧型手持裝置(手機、平板)已是非常普及的日常生活必需品。

所以現在，在開發系統時客戶都會詢問是否支援手機?或平板...(更早期其實還經歷過所謂的PDA版哩@@)

早期開發網站我們會因應客戶的需求做個手機版網站讓手機在閱讀時讓使用者點擊手機版，或隨著時代技術變遷而演變成自動偵測使用者端是否使用手機而將系統導入手機版...

資訊的時代是永遠都在往前跑的，而現在的流行就是所謂的RWD適應性網頁設計...我們的作法主要是利用CSS設定，讓網頁版面的寬度或內容可以依照設計者的設定，以不破版的方式呈現。

以innstory.com為例


當我使用電腦高解析度開啟網站時因為螢幕的寬度夠，所以可以看到完整的網站內容...


而當我使用平板時，由於螢幕寬度變窄，這時我可以選擇讓畫面裡的DIV自動適應寬度100%或者將一些DIV隱藏起來，達到想要的視覺效果


最後，當我使用智慧型手機瀏覽網站時，一樣使用DIV適應或是隱藏的方式來顯示視覺效果...

CSS3 Media Query的設定方式如下
@media screen and (min-width: 768px) and (max-width: 979px) { /*如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。*/ #demo{width:1200px} } @media screen and (max-width: 767px) { /*如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。 */ #demo{width:700px} } @media screen and (max-device-width: 480px) { /*如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。*/ #demo{width:100%} }
除了上述CSS3 Media Query的設定外，還有一個地方必須要設定，就是Viewport

如果網頁的標頭沒有做Viewport設定，手機將會以高解析度來呈現畫面，這將無法符合RWD的設計。

另外，若想知道自己的網站是否符合適應性設計，Google有一個線上行動裝置適用性測試..

https://www.google.com/webmasters/tools/mobile-friendly/

有興趣可以測看看。