本節我們將為你帶來一種全新的樣式技術。通過media queries樣式模組，可以實現根據移動裝置的螢幕大小，定製**頁面的不同布局效果。它的優點是開發者只需要實現一套頁面，就能夠在所有平台的瀏覽器下訪問**的不同效果。
在開始介紹media queries知識之前，先來看看乙個傳統的**在各種移動裝置上的頁面顯示效果。
首先，圖6-1所示的是google首頁傳統**在iphone safari瀏覽器下的效果圖。
從圖6-1中可以看到，網頁上有很多部分的內容都因為瀏覽器的實際大小而縮小了字型大小。為什麼會出現這樣的效果呢？
實際上，在iphone中使用safari瀏覽器瀏覽傳統web**的時候，safari瀏覽器為了能夠將整個頁面的內容在頁面中顯示出來，會在螢幕上建立乙個980px寬度的虛擬布局視窗，並按照980px寬度的視窗大小顯示網頁。這樣，我們所看到的效果就像圖6-1，同時網頁可以允許以縮放的形式放大或縮小網頁。
在過去，為了能夠適應不同顯示器解析度大小，通常在設計**或開發一套**的時候，都會以最低解析度800´600的標準作為頁面大小的基礎，而且還不會考慮適應移動裝置的螢幕大小的頁面。
但是，iphone的解析度是320´480，對於以最低解析度大小顯示的**，在iphone的safari瀏覽器下訪問的效果依然還是那麼糟糕。那麼，究竟這些傳統的web**有沒辦法在iphone等小螢幕的移動裝置下顯示正常呢？答案是可以的。
現在來看看google是如何把傳統**首頁變成移動版本的**首頁的，如圖6-2所示。
google首頁轉成移動版後，整個頁面上的內容已經清晰可見，頁面的樣式風格和傳統**有一些差異。google究竟是如何將傳統的**轉變為移動版本的**的呢？同時，其他複雜的**風格又需要做些什麼才能變成移動版本呢？
若要實現上述的功能，我們需要在html頁面用到viewport及media queries樣式模組。
接下來我們將會介紹如何使用這兩個技術知識點。
1．什麼是viewport
如果開發者沒有定義這個虛擬視窗，移動版safari的虛擬視窗預設大小為980畫素。現在，除了safari瀏覽器外，其他瀏覽器也支援viewport虛擬視窗。但是，不同的瀏覽器對viewport視窗的預設大小支援都不一致。預設值分別如下：
— android browser瀏覽器的預設值是800畫素；
— ie瀏覽器的預設值是974畫素；
— opera瀏覽器的預設值是850畫素。
2．如何使用viewport
viewport虛擬視窗是在meta元素中定義的，其主要作用是設定web頁面適應移動裝置的螢幕大小。
如以下**：
initial-scale=1,user-scalable=0"/>
該**的主要作用是自定義虛擬視窗，並指定虛擬視窗width寬度為device-width，初始縮放比例大小為1倍，同時不允許使用者使用手動縮放功能。
**中的content屬性內共定義三種引數。實際上content屬性允許設定6種不同的引數，分別如下：
— width指定虛擬視窗的螢幕寬度大小。
— height指定虛擬視窗的螢幕高度大小。
— initial-scale指定初始縮放比例。
— maximum-scale指定允許使用者縮放的最大比例。
— minimum-scale指定允許使用者縮放的最小比例。
— user-scalable指定是否允許手動縮放。
本文節選自《html5移動web開發指南》一書唐俊開著
本書詳細資訊:
Media Queries移動裝置樣式
media queries移動裝置樣式 本節我們將為你帶來一種全新的樣式技術。通過 media queries 樣式模組，可以實現根據移動裝置的螢幕大小，定製 頁面的不同布局效果。它的優點是開發者只需要實現一套頁面，就能夠在所有平台的瀏覽器下訪問 的不同效果。在開始介紹 media queries ...
用 Media Queries 設計移動網頁端
今天來通過media queries樣式模組，可以實現根據移動裝置的螢幕大小，定製 頁面的不同布局效果。它的優點是開發者只需要實現一套頁面，就能夠在所有平台的瀏覽器下訪問 的不同效果。用 viewport 設定適應移動裝置螢幕大小 1 什麼是 viewport 如果開發者沒有定義這個虛擬視窗，移動版...
Media Queries語法總結
media queries的語法如下所示 media media query media type and media feature 使用media queries樣式模組時都必須以 media 方式開頭。media query表示查詢關鍵字，在這裡可以使用not關鍵字和only關鍵字。not關鍵...