【RWD關鍵】CSS media屬性判別使用裝置：(RWD)響應式網頁、手機網頁設計、CSS Media應用

W3C定義了CSS media type屬性

用於判斷各種不同裝置載入。可分以下幾個：

all：

是用於所有裝置

braille：

用於盲文觸覺反饋裝置。

embossed：

用於分頁盲文印表機。

handheld：

用於手持設備（通常是小屏幕，有限的帶寬）。

print：

用於分頁材料，在打印預覽模式下的屏幕上觀看的文件。分頁媒體的格式問題，具體到分頁媒體的信息，請諮詢。

projection：

用於例如投影機，投影演示。分頁媒體的格式問題，具體到分頁媒體的信息，請諮詢。

screen：

主要用於彩色電腦屏幕上。

speech：

用於語音合成器。注：CSS2中也有類似的媒體類型稱為“聽覺”這一目的。聽覺樣式表的詳細信息，請參閱附錄。

tty：

供媒體使用固定攤位的字符網格（如電傳打字機，終端，或與顯示能力有限的便攜設備）。作者不應使用“TTY”媒體類型的像素單位。

tv：

用於電視設備（分辨率低，顏色，有限的可滾動屏幕，聲音可用）。

CSS3 media屬性進行自適應網頁設計

透過CSS3 media，可以使得網站透過不同大小的螢幕視窗來改變網頁排版的方式，使得各種裝置的使用者，如電腦、平板、手機、電視都能夠得到最佳的預覽視覺效果。

Max Width

若瀏覽區域的寬度小於600像素，則下方的CSS描述就會立即被套用：

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

Min Width

若瀏覽區域的寬度大於900像素，則下方的CSS描述就會立即被套用：

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

min winthand max-width

遊覽區域寬度範圍在321px~768px，則下方CSS描述會立即被套用：

@media only screen and (min-width: 321px) and (max-width: 768px) {
    .class {
        background: #666; 
    } 
} 

實例展示使用連結方式語法分別不同CSS檔案區分裝置：

使用css media type 區分不同解析度，分別讀入不同css語法

手機：解析度為0px~320px使用 phone.css
平板電腦：解析度為320px~768px使用 tablet.css
桌上型電腦：其他範圍解析度使用 desktop.css

    <link href="/css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" />
    <link href="/css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" />
    <link href="/css/desktop.css" rel="stylesheet" type="text/css" />

DEMO展示可縮放你的遊覽器大小寬度，觀看背景色的變化，來觀看CSS media效果。

DEMO |  範例下載

實例展示在同一個css檔案內區分不同裝置：

    @media only screen and (min-width: 769px) {
        h1{
            color:#03F;
            font-size: 70px;
        }
    }
    @media only screen and (min-width: 321px) and (max-width: 768px) {
        h1{
            color:#F00;
            font-size: 30px;
        }
    }
    @media only screen and (min-width: 0px) and (max-width: 320px){
        h1{
            color:#6F0;
            font-size: 10px;
        }
    }

範例中縮放遊覽器視窗可看見h1標籤的字形大小變化。

DEMO ｜ 範例下載

RWD排版實例展示

HTML

<header>
    header
    <h1>logo</h1>
</header>
<nav>
    nav
</nav>
<article> 
    article
    <section>
        section
        <h1>HTML 5 RWD DEMO</h1>
        <p>隨著智慧型手機的普及網頁的技術近年來也開始重視手機上的視覺效果了，最近與客戶解釋到手機板的網頁時.. </p>
    </section>
</article>
<aside>
    aside
</aside>
<footer>
    footer
</footer>

CSS

header{
    background-color:#666;
}
nav{
    background-color:#096;
}
section {
    background-color: #F00;
    padding:20px;
}
article {
    background-color: #69F;
    float:left;
    width:70%;
    height:500px;
}
aside {
    background-color: #FC0;
    float:right;
    width:30%;
    height:500px;
}
footer {
    background-color: #F6F;
    height:30px;
    clear:both;
}
@media (max-width:480px){
    *{
        padding:10px;
    }
    article {
        float:none;
        width:auto;
        height:auto;
    }
    aside {
        float:none;
        width:auto;
    }
}

簡易的排版，主要使用float在視窗max-width480px時，article 與aside float:none; width:auto;，而這也是CSS media應用在RWD的關鍵。

DEMO ｜ 範例下載