media queries移動裝置樣式
本節我們將為你帶來一種全新的樣式技術。通過
media queries
樣式模組，可以實現根據移動裝置的螢幕大小，定製**頁面的不同布局效果。它的優點是開發者只需要實現一套頁面，就能夠在所有平台的瀏覽器下訪問**的不同效果。
在開始介紹
media queries
知識之前，先來看看乙個傳統的**在各種移動裝置上的頁面顯示效果。
首先，圖
6-1所示的是
首頁傳統**在
iphone safari
瀏覽器下的效果圖。
從圖6-1
中可以看到，網頁上有很多部分的內容都因為瀏覽器的實際大小而縮小了字型大小。為什麼會出現這樣的效果呢？
實際上，在
iphone
中使用safari
瀏覽器瀏覽傳統
web**的時候，
safari
瀏覽器為了能夠將整個頁面的內容在頁面中顯示出來，會在螢幕上建立乙個
980px
寬度的虛擬布局視窗，並按照
980px
寬度的視窗大小顯示網頁。這樣，我們所看到的效果就像圖
6-1，同時網頁可以允許以縮放的形式放大或縮小網頁。
在過去，為了能夠適應不同顯示器解析度大小，通常在設計**或開發一套**的時候，都會以最低解析度
800´
600的標準作為頁面大小的基礎，而且還不會考慮適應移動裝置的螢幕大小的頁面。
但是，iphone
的解析度是
320´
480，對於以最低解析度大小顯示的**，在
iphone
的safari
瀏覽器下訪問的效果依然還是那麼糟糕。那麼，究竟這些傳統的
web**有沒辦法在
iphone
等小螢幕的移動裝置下顯示正常呢？答案是可以的。
現在來看看
是如何把傳統**首頁變成移動版本的**首頁的，如圖
6-2所示。
首頁轉成移動版後，整個頁面上的內容已經清晰可見，頁面的樣式風格和傳統**有一些差異。
究竟是如何將傳統的**轉變為移動版本的**的呢？同時，其他複雜的**風格又需要做些什麼才能變成移動版本呢？
若要實現上述的功能，我們需要在
html
頁面用到
viewport
及media queries
樣式模組。
接下來我們將會介紹如何使用這兩個技術知識點。
1．什麼是
viewport
為了解決移動版
safari
的螢幕解析度大小問題，專門定義了
viewport
虛擬視窗。它的主要作用是允許開發者建立乙個虛擬的視窗（
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倍，同時不允許使用者使用手動縮放功能。
在上面的**中，我們使用了乙個特別的名字：
device-width
。自iphone
面世以來，其螢幕的解析度一致維持在
320´
480。由於
在加入viewport
時，基本上使用
width= device-width
的表達方式來表示
iphone
螢幕的實際解析度大小的寬度，比如
width=320
。因此，其他瀏覽器廠商在實現其
viewport
的時候，也相容了
device-width
這樣的特性。
**中的
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樣式模組，可以實現根據移動裝置的螢幕大小，定製 頁面的不同布局效果。它的優點是開發者只需要實現一套頁面，就能夠在所有平台的瀏覽器下訪問 的不同效果。用 viewport 設定適應移動裝置螢幕大小 1 什麼是 viewport 如果開發者沒有定義這個虛擬視窗，移動版...
Media Queries語法總結
media queries的語法如下所示 media media query media type and media feature 使用media queries樣式模組時都必須以 media 方式開頭。media query表示查詢關鍵字，在這裡可以使用not關鍵字和only關鍵字。not關鍵...