Loading...

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

Temperature: 0 °C

ChungChung
author_tools

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

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

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

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

以innstory.com為例

Responsive Web Design使用CSS3的Media Queries進行自適應網頁設計
使用電腦高解析度開啟網站時因為螢幕的寬度夠,所以可以看到完整的網站內容...

Responsive Web Design使用CSS3的Media Queries進行自適應網頁設計
而當使用平板時,由於螢幕寬度變窄,這時可以選擇讓畫面裡的DIV自動適應寬度100%或者將一些DIV隱藏起來,達到想要的視覺效果

Responsive Web Design使用CSS3的Media Queries進行自適應網頁設計
最後,當使用智慧型手機瀏覽網站時,一樣使用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/

有興趣可以測看看。

台北市松山區八德路四段650號 Go

https://innstory.com/story-Responsive_Web_Design使用CSS3的Media_Queries進行自適應網頁設計-397
寫程式筆記

Prev
 日本大阪心齋橋&道頓崛

Next
來去大阪人的廚房黑門市場 

Nearby Attractions

台北市松山區八德路四段650號-Nearby Attractions

  • 台灣基督長老教會大稻埕教會 Go
  • 臺北水道水源地 Go
  • 李春生紀念基督長老教會(大稻... Go
  • 國立臺灣大學日式宿舍─馬廷英... Go
  • 機器局第五號倉庫 Go
  • 閻錫山墓 Go

About the Author

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

#有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

解決png圖檔GD合圖後背景色塊問題

解決png圖檔GD合圖後背景...

重點在於設定圖片走透明通道~ $img = imagecreatefrompng($src); im...

Welcome To Google

Welcome To Goo...

Top第一天,參訪了Google APAC HQ 第一次來到Google,難掩興奮心情,拼命的拍了一...

Google map 語言本地化

Google map 語言本...

網路世界的強大...真的是解決問題的好幫手.....雖說有些答案並不可靠.... 但原則上...只要...

Recommended reading

Other stories happened at this address

RewriteRule仿靜態連結

RewriteRule仿靜態...

前幾天寫了關於頁面導向位置的定義。https://innst...

定義404頁面

定義404頁面

什麼是頁面? HTTP 或Not Found錯誤訊息是HTTP的其中一種「標準回應訊息」(HTTP狀...

該看看書了-Mr. Jamie 網路創業七堂課

該看看書了-Mr. Jami...

我愛看書? 其實也並不是。與其說我愛看書,倒不如說我愛買書,因為喜歡看書櫃上擺滿書的樣子... 只是...

今晚,來盤鯊魚(炒)芹菜。

今晚,來盤鯊魚(炒)芹菜。

已經忘了從什麼時候開始會煮菜的... 我煮的菜,叫不出什麼響亮的名字、外表樸實、味道是傳承小時候家裡...

意外的客人

意外的客人

今晚,我的水族箱裡來了一位嬌客,【豆娘】... s 我想,牠應該是前幾天去水族店買黑殼蝦時偷渡來的....

最愛的藝術文宣

最愛的藝術文宣

每次看到這些藝文文宣, 總會讓我想起以前在廣告公司上班的日子, 工作壓力雖然很大, 可是卻是做著自己...

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format