記憶加載中,請稍待...
Hello,你已經閒置了一些時間~
或許,你有興趣閱讀一篇故事:
JuilinChung
鎖住記憶
選擇大頭貼照
重新調整位置

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

收藏小紙條

無法截取內容!!但仍舊可以收藏小紙條

2015-04-27 JuilinChung 283 0
智慧型手持裝置(手機、平板)已是非常普及的日常生活必需品。

所以現在,在開發系統時客戶都會詢問是否支援手機?或平板...(更早期其實還經歷過所謂的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
  • 這個地址也發生了其他 35 篇故事
    ありがとう 大橋卓彌 By JuilinChung 熊出沒! By JuilinChung Google map 功能導入 By JuilinChung 行事曆功能導入 By JuilinChung 地圖故事 By JuilinChung 喔熊又來了 By JuilinChung 蘑菇醬麵 By JuilinChung 搞累我了,小蘋果。 By JuilinChung Responsive Web Desig ... By JuilinChung Mysql最怕就是手賤 By JuilinChung 現在這個時候最幸福 By JuilinChung 愛情無全順 By JuilinChung 今晚,來盤鯊魚(炒)芹菜。 By JuilinChung 鍾姓三嘗祠堂 By JuilinChung 義大利麵 By JuilinChung 來一盤駱式海鮮義大利麵 By JuilinChung 一個人的簡單午餐...貓飯加上洛葵。 By JuilinChung 今晚晚餐,簡單又營養蛤蜊湯。 By JuilinChung RewriteRule仿靜態連結 By JuilinChung 判斷捲軸的位置 By JuilinChung PHP數字轉國字... By JuilinChung 圖型插件Elastislide By JuilinChung Mandy說我想要募款去紐西蘭@@ By JuilinChung 用distinct在MySQL中查詢多條 ... By JuilinChung 紙娃娃 By JuilinChung 意外的客人 By JuilinChung 該看看書了-Mr. Jamie 網路創業 ... By JuilinChung 最愛的藝術文宣 By MaggieLee 定義404頁面 By JuilinChung Mysql 查詢時間區間是否包含特定日期 By JuilinChung 馬來西亞-薩騎馬? By JuilinChung Photoshop 曲線文字建置 By JuilinChung 圖文穿插效果 By JuilinChung HTML5 影音手持裝置適應不良篇 By JuilinChung 你是不是像我就算受了冷漠,也不放棄自己想 ... By JuilinChung

其他您可能會有興趣的故事

來去大阪人的廚房黑門市場
日本大阪心齋橋&道頓崛

須同意使用 Email 才可進入此頁面

須同意使用 姓名 才可進入此頁面

須同意使用 性別 才可進入此頁面

須同意應用程式才能使用Facebook帳號進入此頁面

請重新登入!

Hi,謝謝你的參與,但無法重複投票哦~

Hi,請選擇一個你認為的答案

錯誤的URL...

執行錯誤...

別忘了填寫欄位...

輸入格式錯誤...

Email已經有人使用...

請填寫Email...

請填寫正確的Email...

密碼裡需包含英文字及數字8至12...

確認密碼是否與密碼相同...

很抱歉 您並沒有權限!請確認您的帳號密碼 或請連絡我們

正在更新排序...

帳號已經存在!請確認您的帳號密碼 或請連絡我們...