HTML5實務-CSS3 Media Queries詳情介紹

　　CSS2可讓你對特定media類型製定樣式，例如針對螢幕或印表機。 css3提供了更強大的media queries，你可以為不同media類型設定表達式，根據不同的條件設定不同的樣式。例如你可以為大螢幕設定一種樣式，為mobile設定另一個樣式。這個功能相當強大，你可以不修改頁面內容的情況下，為不同裝置提供不同的樣式效果。以下的課程我們將會介紹到一些使用該技術的網站。

　　CSS3 Media Queries

　　開啟我的demo頁面，調整瀏覽器打大小，查看頁面佈局變更狀況。

　　Max Width

　　當頁面檢視區域小於600px寬度的時候，css會被使用到。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }}

　　你也可以使用下面的方式，在頁面的中引用外部css檔案。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

　　Min Width

#　　當視圖區域大於900px寬度的時候，css會被使用到。

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }}

　　多個 Media Queries

　　你可以把多個media queries組合在一起，當視圖區域寬度在600px到900px之間的時候，會使用下面的css。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }}

　　裝置Width

　　下面的css會在 max-device-width為480px的時候使用，例如iphone。

　　note：max-device-width指的是裝置實際分辨率，max-width指的是可是區域尺寸。

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }}

　　針對 iPhone 4

#　　下面的時針對iphone4的css。

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

　　針對 iPad

#　　你也可以在ipad上檢查定位（portrait 或 landscapse）。

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

　　針對Internet Explorer的Media Queries

　　因為ie8以及先前版本的ie瀏覽器不支援media query，你需要使用JavaScript的hack計較解決問題。以下是一些解決方案：

• CSS Tricks - 使用jquery判斷瀏覽器尺寸

• The Man in Blue - 使用Javascript (這篇文章是六年前寫的)

• jQuery Media Queries 外掛程式

##　　範例網站

#　　你可以使用支援media query的瀏覽器存取下面的站點，例如：Firefox, Chrome, 和Safari。可以查看他們針對瀏覽器寬度所做的佈局回應。

　　Hicksdesign

• 大尺寸: 3 列sidebar

• #小尺寸: 2 列sidebar (中間的sidebar跑到了左邊)

• #更小尺寸: 1 列sidebar （最右邊的跑到了logo下面）

• 最小尺寸: 沒有sidebar (logo 和右邊的sidebar 上移，其他sidebar 下移)

# 

　　Colly

　　頁面佈局根據瀏覽器的

視覺區域，在1列、2列和4列之間切換。

　　A List Apart

#大尺寸：導航在上不部, 1行圖片

#中等尺寸：導航在左邊, 3列圖片

小尺寸：導航在上部，logo沒有背景圖片, 3列圖片

　　Tee Gallery

　　他和之前的Colly有點像，不同點在於它的圖片會根據頁面佈局的變化，進行縮放。這裡使用的技巧就是，圖片使用百分比寬度，取代固定寬度，例如：width=100%。

　　總結

　　我們需要注意到，針對mobile做了一個css，並不代表我們的網站對mobile裝置就是最佳化的。對mobile設備進行最佳化，網站圖片和html程式碼同樣需要縮小尺寸，這樣才有益於載入。 media query做到的只是設計展現，而不是優化操作。

以上是HTML5實務-CSS3 Media Queries詳情介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！