CSS3中使用媒體查詢（media query）適配布局

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1，媒體查詢的作用

@media (media-feature-name: value) {
/* 符合條件時應用的樣式 */
}
上面是媒體查詢的基本結構，根據查看網頁的裝置的某些重要訊息（比如螢幕大小、解析度、顏色位深等），頁面可以分別應用不同的樣式甚至替換整個樣式表。
如果瀏覽器當前的條件與圓括弧中的條件匹配，它就會採用花括弧中的那些樣式。如果不匹配，瀏覽器會忽略這些樣式。
注意：瀏覽器始終會採用位於@media代碼塊之外的樣式。滿足條件時的媒體查詢樣式是在其他樣式基礎上應用的。為此，條件式媒體查詢樣式經常要覆蓋其他樣式，比如隱藏之前的可見元素，把區塊移動位置，調整字型大小等。

2，媒體查詢中最常用的媒體特性（media feature）
特性名值應用情境
width
min-width
max-width 顯示地區的寬度（對印表機而言是列印表面）改變布局以適應非常窄（如手機）或非常寬的顯示器。
height
min-height
max-height 顯示地區的高度改變布局以適應非常長或非常短的顯示器
device-width
min-device-width
max-device-width 當前電腦或裝置螢幕的寬度
（或列印輸出時紙面的寬度）根據不同裝置（如手機）調整布局
device-height
min-device-height
max-device-height 螢幕或紙面的高度根據不同裝置（如手機）調整布局
orientation landscape（橫向）或portrait（縱向）根據裝置的朝向調整布局
device-aspect-ratio
min-device-aspect-ratio
max-device-aspect-ratio 顯示地區的寬高比（1/1是正方形）根據視窗形狀調整樣式（問題可能比較複雜）
color
min-color
max-color 螢幕顏色的位深
（1位表示黑白，目前主流顯示器都是24位）檢查是否支援彩色輸出（比如是不是黑白列印），
或者支援的顏色數量
雖然有這麼多媒體特性，但目前最流行最常用的是如下幾個：
max-device-width：用於建立手機版網站
max-width：用於針對視窗寬度設定不同的樣式
orientation：用於根據平板電腦或iPad的橫向或者豎向來改變布局

3，使用範例一

預設情況下左欄的背景色是黃色的，當瀏覽器視窗小於400像素時，左欄的背景色變成橙色。當視窗繼續縮小，小於300像素時，左欄的背景色變成紅色。

<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>hangge.com</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .leftColumn {
            width: 50%;
            float: left;
            background-color:yellow;
            height:300px;
        }

        .rightColumn {
            width: 50%;
            float: left;
            background-color:#7FFF9B;
            height:300px;
        }

        @media (max-width: 400px) {
            .leftColumn {
                 background-color:orange;
            }
        }

        @media (max-width: 300px) {
            .leftColumn {
                 background-color:OrangeRed;
            }
        }
    </style>
</head>
<body>
    <div class="leftColumn">
        left
    </div>
    <div class="rightColumn">
        right
    </div>
</body>
</html>

4，使用範例二
下面是一個經典的兩欄式布局的頁面，我們要通過媒體查詢定義不同的樣式，讓其能夠適應手機瀏覽器和案頭瀏覽器：
（1）預設情況下，頁面分為左右兩欄。左欄固定寬度，右欄自適應寬度（通過浮動和負邊距實現）
（2）一般移動版網站都只用一欄，因為螢幕小，並排兩欄並不好看。所以當瀏覽器視窗寬度小於568像素時，左側導覽列會轉移到主內容之下。（由於HTML頁面中左欄是定義在主內容之下，所以只要將左右欄去掉浮動、重設欄寬（每欄佔滿可用寬度）即可）

樣式 hangge.css

article, aside, figure, figcaption, footer, header, hgroup, nav, section, summary {
display: block;
}

*{
   margin: 0px;
   padding: 0px;
}

body {
font-size: medium;
font-family: "Helvetica","Hiragino Sans GB","Microsoft Yahei", sans-serif;
}

a {
    color: #999;
    text-decoration: none;
    cursor: pointer
}

a:hover {
    color: #5188a6;
    text-decoration: none
}

#wrapper {
    max-width: 853px;
}

header.SiteHeader {
padding: 10px;
background: #000000;
}

aside.NavSidebar
{
padding: 5px 15px 5px 15px;
width: 203px;
background-color:#f9f9f9;
font-size: small;
float:left;
margin-right: -100%;
}

aside.NavSidebar h2 {
color: #6B6E3F;
border-bottom: thin #6B6E3F solid;
margin-bottom: 10px;
margin-top: 20px;
}

aside.NavSidebar ul {
padding-left: 15px;
}

aside.NavSidebar li {
padding-bottom: 8px;
}

.ContentOuter {
float: right;
width:100%;
}

.Content {
padding: 20px;
margin-left:233px;
}

@media (max-width: 700px) {
    aside.NavSidebar {
         float:none;
         width:auto;
         margin-right:auto;
    }

    .ContentOuter {
         float:none;
         width:auto;
    }

    .Content {
          margin-left:0px;
    }
}

.Content h3 {
color: #24486C;
margin-bottom: 2px;
font-size: medium;
}

.Content p {
margin-top: 0px;
}

header.ArticleHeader {
padding: 10px;
margin: 10px;
text-align: center;
}

header.ArticleHeader h2 {
font-size: xx-large;
}

footer {
background: #333333;
color:#c0c0c0;
padding: 10px;
text-align: center;
font-size: x-small;
clear:both;
}

footer .Disclaimer {
font-style: italic;
}

footer p {
margin: 3px;
}

頁面代碼：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>航歌</title>
<link rel="stylesheet" href="hangge.css">
</head>

<body>
<div id="wrapper">
    <header class="SiteHeader">
      <img src="logo.png" alt="hangge.com">
      <h1 style="display:none">hangge.com</h1>
    </header>

    <main class="ContentOuter">
    <article class="Content">
      <header class="ArticleHeader">
        <h2>歡迎來到hangge.com</h2>
      </header>

        <p>前面講了如何讓程式申請後台短時運行。但這個額外延長的時間畢竟有限。</p>
        <br/>
        <h3>小標題1</h3>
        <p>前面講了如何讓程式申請後台短時運行。但這個額外延長的時間畢竟有限。</p>
        <br/>
        <h3>小標題2</h3>
        <p>前面講了如何讓程式申請後台短時運行。</p>
    </article>
    </main>

     <aside class="NavSidebar">
      <nav>
        <h2>熱門文章</h2>
        <ul>
          <li><a href="...">Swift - 委託（delegate）的介紹，及使用範例</a></li>
          <li><a href="...">Swift - 讓程式掛起後，能在後台繼續運行任務</a></li>
          <li><a href="...">Swift - 產生不重複數位隨機數產生器</a></li>
          <li><a href="...">Swift - FTP用戶端的製作（使用Rebekka庫）</a></li>
          <li><a href="...">Swift - 一個簡單的動畫效果（方塊來回反覆移動）</a></li>
          <li><a href="...">More ...</a></li>
        </ul>
      </nav>
    </aside>

    <footer>
        <p class="Disclaimer">hangge.com 著作權,未經允許不得轉載</p>
    </footer>
</div>
</body>
</html>

5，媒體查詢的進階條件

（1）使用 and 關鍵字拼接媒體查詢塊

/** 正常樣式 **/

@media (min-width: 600px) and (max-width: 700px) {
    /** 視窗寬度在600-700像素的樣式 **/
}

@media (min-width: 500px) and (max-width: 599.99px) {
    /** 視窗寬度在500-600像素的樣式 **/
}

@media (max-width: 499.99px) {
    /** 視窗寬度小於500像素的樣式 **/
}

（2）使用 not 關鍵字（下面這個功能效果與上面那個一樣）

/** 正常樣式 **/

@media (not max-width: 600px) and (max-width: 700px) {
    /** 視窗寬度在600-700像素的樣式 **/
}

@media (not max-width: 500px) and (max-width: 600px) {
    /** 視窗寬度在500-600像素的樣式 **/
}

@media (max-width: 500px) {
    /** 視窗寬度小於500像素的樣式 **/
}

6，替換整個樣式表
如果樣式修改的地方很多，那麼建立一個新樣式表會更便於管理。建立樣式表後，可以使用媒體查詢建立一個樣式表連結。
（1）當頁面寬度小於568像素時，會應用新樣式並與原來已存在的樣式疊加。
<head>
<link rel="stylesheet" href="hangge.css">
<link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
</head>

（2）下面範例讓幾個樣式完全獨立，不疊加

但像舊版的IE不理解媒體查詢就會忽略這兩個樣式表，所以我們需要使用條件注釋引入標準樣式表：

7，識別特定的行動裝置
（1）檢測手機
使用 max-device-width 可以區別普通電腦和行動裝置。根據經驗，將 max-device-width 設定為568像素就能夠涵蓋目前的iPhone和Android手機（不管橫向還是豎向）：

注意：對於高解析度螢幕的手機上面規則也是適用的，這是由於高分屏手機引入像素比（pixel ratio）。
以iPhone5為例，雖然它的物理像素是：640像素*1136像素，但它的像素比是2（兩個物理像素對應一個CSS像素）。因此其聲明的CSS像素是：320像素*568像素。

（2）檢測平板
對於iPad等平板，使用者經常會改變方向。改變方向雖然會改變 max-width，但不會改變 max-device-width。無論豎向還是橫向，iPad始終報告自己的裝置寬度為768像素。
所以我們要組合使用 max-device-width 和 orientation 屬性，以便區別iPad的方嚮應用不同的樣式：

7
<link rel="stylesheet"
    media="(max-device-width: 768px) and (orientation: portrait)"
    href="iPad_portrait.css">

<link rel="stylesheet"
    media="(max-device-width: 768px) and (orientation: landscape)"
    href="iPad_landscape.css">
（上面規則不僅限於iPad，其他螢幕大小類似（768像素或更小）的裝置也適用）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More