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

JavaScript的獲取日期代碼不足兩位數補0

JavaScript的獲取日...

當我們用javascript得到了一個時間後...針對月份及日期的部分只會顯示數字... funct...

Google map 功能導入

Google map 功能導...

blogmap 寫故事還是得有地圖才好厚! 前幾天,sam同我說有一個客戶有Google map的需...

Html編輯器Ckeditor 4.0內容讀取與寫入方式

Html編輯器Ckedito...

ckor 在Html編輯器裡,Ckor功能很強大雖然好用....但還是有很多部份需要微調啊... 原...

Recommended reading

Other stories happened at this address

Photoshop 曲線文字建置

Photoshop 曲線文字...

Photoshop一直都是很強悍的繪圖軟體。 裡頭的【鋼筆工具】,可以拉貝茲曲線的.... 我剛開始...

Mysql最怕就是手賤

Mysql最怕就是手賤

今天我手賤了眼盲了@@... 錯把delete當成UPDATE....啃!!今天下午超不順的... ...

來一盤駱式海鮮義大利麵

來一盤駱式海鮮義大利麵

這天我跟客戶開會,晚了...沒趕得急下廚,所以就由Mandy大展身手... 問她需不需要幫忙做什麼,...

搞累我了,小蘋果。

搞累我了,小蘋果。

Mandy喜歡運動。 她喜歡跑步、爬山、跳韻律舞....我也偶爾會被抓去跟她一起爬山跟跑步。 爬山的...

熊出沒!

熊出沒!

前幾天,花了些時間重新設計了innstory裡的代表頭像... facechange 想說把一開始的...

你是不是像我就算受了冷漠,也不放棄自己想要的生活。

你是不是像我就算受了冷漠,也...

累了就該充電一下,聽首好歌... 好歌總能激勵人心。 不寫,就會就永遠寫不完......寫了,遲早有...

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