[轉貼自]http://www.techbang.com/posts/3928-moving-a-label-is-working-on-mobile-version-of-website
供手機瀏覽的網頁可不只是「把版面縮小就好」
複合版網站就是能同時給桌面和手機使用的網站，它跟剛談到的「與電腦共用」並不一樣，複合版網站雖然內容相同，但是它會根據螢幕大小來呈現版面。要做複雜合型網站其實並不難，只要用CSS與HTML標籤來調整就行，比如HTML的viewport以及CSS的media queries。
何謂viewport
Viewport指的是「畫面視圖」，它是一堆數值的組合，白話一點的解釋就是你可以在畫面上看到的範圍，可以分成顯示畫面視圖(display viewport)以及實際畫面視圖(actual viewport)二種。對於電腦瀏覽器來說，viewport比較不重要，因為顯示畫面視圖跟實際畫面視圖是一樣的。
如果我們在CSS裡寫width＝200px，表示在顯示器上這個物件寬200px，但在手機上卻不是。CSS規範中鼓勵製造商可以自行決定硬體像素要對應到多少顯示像素，比如手機業者可能因為螢幕比較小，會把比例設定成1:0.5，所以手機畫面會比實際畫面小了一半。
怎麼調整呢？只要在HTML的語法中嵌入<meta name=”viewport” content=”width=device-width”>，把actual viewport的值給visual viewport，這樣網頁就可以完整放入手機的小螢幕。至於CSS的部分，Opera在今年的W3C CSS會議中提出了要把viewport標籤加入CSS。如果最後順利通過，以後viewport就可以直接在CSS語法裡設定。
▲左圖是我們所看到的visual viewport，也就是顯示畫面視圖，右圖則是actual viewport。這兩張圖解釋了為什麼我們在手機上看的網站只有一小部分，因為網頁以為手機的螢幕跟電腦的一樣大。
▲讓actual viewport的數值等於visual viewport，就可以讓完整的網頁植入手機。
何謂media queries
Media queries是CSS3的新功能，它整合了media type和max min-width/max min-height media type這兩個屬性，可以在不同的裝置下顯示不同的CSS版面。比如給screen的版面是一般的顯示畫面，給print的就是印表機的輸出格式。
以印表機為例，如果我們不想印出網站的選單列，可以在media type下選擇不同的CSS呈現方式。
以下的範例裡頭有兩種CSS media queries的顯示版面，它們是根據螢幕的大小來提供顯示內容，當寬度小於480px，網頁版面就會改變，比如sidebar會移到畫面下方而不是跟著主畫面浮在左邊(float: left)。閱動動向同時也會改變成由上到下，比較適合手機的垂直式閱讀，免得讀者還要吃力地在小螢幕上左右移動。
@media all and (min-width: 480px) and (max-width: 800px) {
#container {width: auto; max-width: 800px;}
#main {width: 70%; float: left;}
#sidebar {width: 30%; float: left; margin-bottom: 10px;}
#pub {width: 30%; margin-left: 70%; float: none;} } @media all and (min-width: 400px) and (max-width: 480px) {
#container {width: auto; max-width: 480px;}
#main, #sidebar, #pub {width: 100%; float: none;}
h1 {position: absolute; top: 0; height: 30px; width: 100%;}
#sidebar {position: absolute; top: 40px; height: 40px;}
#sidebar p {display: none;}
#sidebar ul {padding: 0; margin-top: 10px; overflow: hidden;}
#sidebar ul li {display: inline; font-size: 15px;}
#main {position: absolute; top: 80px;}
#pub, #footer {display: none;}
}
▲這張圖使用Opera Mobile Emulator來顯示viewport的兩個Media queries，它們是按照寬度來改變CSS的呈現。
留言列表
