現在可以連上互聯網的裝置越來越多,而且各個裝置的闊度也有所不同,在設計網站時經常要為不同闊度作出調整。 針對這個問題,我們可以透過viewport及media-query來修正網站的顯示方式。 viewport的應用方式 現時大多數的裝置都會將網站的闊度預設為980px,也就是說如果你的網站闊度大於或少於980px,將會無法完整地顯示整個網站。 在這個情況下,我們需要透過viewport來告訴裝置網站實質的闊度,例如我們的網站是720px,可以這樣設定viewport: <meta name="viewport" content="width=720"> 那麼裝置就會完整地顯示整個網站。 透過viewport取得裝置的實際闊度
<meta name="viewport" content="width=device-width, initial-scale=1.0"> viewport的各個特性 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> initial-scale=1,告訴裝置以100%顯示網站,不做任何的自動縮放,這時將需要手動移動或縮放頁面。 user-scalable=no,禁止用戶手動縮放網站。 maximum-scale=1,設定網站最大的縮放大小。 使用viewport及media-query來調整網站的顯示方式 首先我們使用viewport來告訴網站,現在使用者的裝置實際的闊度: <meta name="viewport" content="width=device-width, initial-scale=1.0"> 然後,我們再透過css的media-query針對不同的闊度設定不同的顯示方式: @media all and (max-width: 1024px) { /* styles for narrow desktop browsers and iPad landscape */ } @media all and (max-width: 768px) { /* styles for narrower desktop browsers and iPad portrait */ } @media all and (max-width: 480px) { /* styles for iPhone/Android landscape (and really narrow browser windows) */ } @media all and (max-width: 320px) { /* styles for iPhone/Android portrait */ } @media all and (max-width: 240px) { /* styles for smaller devices */ } 資料引自 : http://kaon-wong.blogspot.hk/2012/10/css.html
2 評論
【站長備忘】關於名下域名
10/3/2015 03:22:09
直接選用"MyTheme_8" 範本,便可解決在不同網置的顯示問題。
回覆
For Web CSS
6/12/2016 11:47:40
在no-header.html css 欄位 <head> </head> 之間,加上 :
回覆
發表回覆。 |
|
|
|
關於本站 |
關於站長謝謝查詢,稍後補充 !
|
聯絡我們 |
|
站長區 |
Copyright © 2013 醫訊站 Clinic24HK.Com. 版權所有 (欄位「醫療組織介紹」及其他連結版面資料除外) 歡迎轉載 (唯必須註明「資料引自 - 醫訊站: http://www.clinic24hk.com」+ 按此留言告知,敬請備悉,謝謝合作 ! )