Loading...

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

Temperature: 0 °C

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

所以現在,在開發系統時客戶都會詢問是否支援手機?或平板...(更早期其實還經歷過所謂的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/

有興趣可以測看看。

台北市松山區八德路四段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

在手機上如何建立網址到手機桌面中並且使用圖示

在手機上如何建立網址到手機桌面中並且使用圖示

上回做專案時,客戶說了手機桌面上的網站捷徑太醜,想要美化。 這回索性也幫...

分享到各社群的方式

分享到各社群的方式

每次在寫網站系統時..客戶總會要求希望他們的網站可以有分享到社群網站的功能... 所以...

PHP網路爬蟲之抓取meta value

PHP網路爬蟲之抓取meta value

最近在研究著如何抓取網頁中的meta值... php中的getmetatags函式可以...

Recommended reading

Other stories happened at this address

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

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

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

義大利麵

義大利麵

Mandy 喜歡吃麵食... 而最近她喜愛的麵食是義大利麵...一有機會就一直在我耳邊...

今晚晚餐,簡單又營養蛤蜊湯。

今晚晚餐,簡單又營養蛤蜊湯。

假日的晚餐.... s 就這一碗蛤蜊湯... 因為,太晚吃午餐。因為,肚子還太飽。 所...

馬來西亞-薩騎馬?

馬來西亞-薩騎馬?

想事情的時候,喜歡在嘴裡咬東西...餅乾、糖果。 但最近家裡缺糧...沒有補貨。剛好想...

蘑菇醬麵

蘑菇醬麵

據我所知...老婆大人在嫁給我之前是顯少進廚房的 上個星期天....老婆說想煮蘑菇醬麵...

Mysql最怕就是手賤

Mysql最怕就是手賤

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

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