首頁 >web前端 >H5教程 >HTML5實務-CSS3 Media Queries詳情介紹

HTML5實務-CSS3 Media Queries詳情介紹

黄舟原創: 2017-03-23 15:36:231912瀏覽

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

　　CSS3 Media Queries

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

　　Max Width

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

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

　　你也可以使用下面的方式，在頁面的93f0f5c25f18dab9d176bd4f6de5d30e中引用外部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">