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

整合Facebook粉絲專頁的即時訊息,Zotabox網站打造免費線上支援平台。

整合Facebook粉絲專頁...

還記得在msn的年代,msn有提供在網站上架構即時通訊功能,方便網站管理者與user直接交談~ 現在...

CSS Radio Button

CSS Radio Butt...

寫系統的時候三不五時總會用到Radio Button 和 Checkboxes 目前就在寫這個部份@...

IE10 在 fckeditor無正常顯示及無法輸入任何字元

IE10 在 fckedit...

於fckorcodeie.js 檔案中, 在B.open(‘GET’, A, false); 及 B...

Recommended reading

Other stories happened at this address

Mandy說我想要募款去紐西蘭@@

Mandy說我想要募款去紐西...

bg (示意圖,不確定是不是南湖大山..是在寫太魯閣系統時使用的素材) 南湖大山位於台灣的中央山脈主...

圖型插件Elastislide

圖型插件Elastislid...

teach Elastislide是一款好用的圖形插件......

地圖故事

地圖故事

map 一切都從第一張畫布開始... Innstory裡原先已有寫故事的功能,接著我把故事裡頭的照片...

蘑菇醬麵

蘑菇醬麵

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

Mysql 查詢時間區間是否包含特定日期

Mysql 查詢時間區間是否...

這其實只是一個簡單的問題,以前並不常用... 但這陣子寫的案子比較偏系統面,這樣的查詢問題變多了@@...

一個人的簡單午餐...貓飯加上洛葵。

一個人的簡單午餐...貓飯加...

Mandy今天中午不在家。 但她煮了一鍋ABC湯....也煮好了飯。 剛剛下樓炒了一盤時蔬(洛葵),...

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