CSS3——針對窄屏來改變佈局

流行、實用且擁有良好支援的CSS3是CSS技術的升級版本，CSS3語言開發是朝著模組化發展的。以前的規範作為一個模組實在是太龐大而且比較複雜，所以，把它分解為一些小的模組，更多新的模組也被加入進來。CSS3提供了很多新途徑來改善設計工作，且做了不少重要的變化。可建立引人注目的視覺效果，如半透明背景、漸變、投影、字型、動畫，並可在不使用JavaScript的情況下進行特定於使用者具體裝置和螢幕尺寸的自定義設計。

---

針對寬屏的佈局調整完成以後，現在讓我們把目光投向窄屏終端。首先，我們要在之前增加的第一個媒體查詢的下方另外新增一個，其目標是可視區域窄於760px的終端：

@media screen and (max-width: 760px) {
}

這將告訴瀏覽器我們希望填加到媒體查詢之內的樣式是應用於媒體型別screen而可視區域小於760px的終端。我為何要選擇760px這個寬度？因為該寬度值可以防止這些樣式被應用於800×600解析度的桌面顯示器的最大化視窗，還包括768×1024解析度的iPad。我希望這些終端能夠應用普通的樣式，因為在上述解析度下介面能夠保持不錯的狀態。但小於760px的寬度，介面就開始看起來有些擁擠，內容溢位容器的可能性也隨之增加。

同樣地，讓我們先拿導航條開刀——修改樣式讓它更好地符合可用的寬度。當視窗寬度過窄時，整個導航條會另起一行並排列到logo的下方，這並無大礙；它仍會保持向右對齊，但當左方沒有了logo之後看起來效果不佳。因此當它在logo下方另起一行時，我們就把導航條改為向左對齊：

@media screen and (max-width: 760px) {
    #nav-main {
        clear: left; 
        float: left;
    }
    #nav-main li { margin: 0 .5em 0 0; }
}

你可以從圖6-8看出修改前後的差別。這是一項細微的改動，但效果卻很不錯，而且只需要書寫一點點CSS便可以實現。

接下來，讓我們去除引言段落的分欄效果——當視窗寬度小於760px時，分欄看起來非常難看（見圖6-9）。在第二個媒體查詢區塊裡書寫一條新的h1 + p規則，並在其中將欄目數改為1：

   h1 + p {
        -moz-column-count: 1;
        -o-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }

改動之後，引言段落裡每行的長度看起來合理多了（見圖6-10），但在它正下方並列顯示的三個段落仍舊看起來非常窄小（見圖6-11）。我們將繼續予以改進。

目前，每個特色產品框都是在左側浮動的一個div。取消浮動將使它們改為由上至下排列，而且佔據主內容div的整個寬度。當它們由上至下排列時，位於每個上部的圖片就顯得不是非常美觀，而將圖片移到左邊來就顯得更為合理。因此我們給媒體查詢增加如下的新規則：

.feature {
    float: none;
    width: auto;
    margin: 0 0 1.6em 0;
    padding: 0 0 0 140px;
    background-position: top left;
}

說明 三張圖片都來自Icon Eden出品的Yummy免費圖示集（www.iconeden.com/icon/yummy- free-icons.html）。

這條規則取消了特色產品框的浮動和寬度設定，併為了給圖片騰出空間將上內邊距替換成了左內邊距（因為使用的是背景圖），以便讓它顯示於產品框的左側。

至此，對窄屏版頁面還剩下最後一項修改：目前右側的欄目太窄了，增加了其內容中的長單詞溢位的可能性，欄目標題便是其中最“危險”的一個，因為它全是大寫字母從而佔據了更多的位置。我們可以通過減小字號和文字間距來降低其溢位的風險：

h3 {
    font-size: 100%;
    letter-spacing: 0; 
}

你可以看到這條規則所產生的效果（見圖6-13）。這同樣是一次細微的修改，卻降低了文字溢位的風險，也使文字更方便閱讀了。

至此我們就完成了針對窄屏版面包坊頁面的所有修改（見圖6-14）。儲存頁面並在尚不落伍的瀏覽器中開啟，縮放視窗便可檢視頁面在極窄和極寬條件下的設計變化。

說明 至此所有修改都在media-queries_2.html頁面裡，它在下載本章示例檔案之中。