RWD 版型實作-書籍清單頁

RWD 系列文章 》

此頁面彙整工作室曾經出版的部份圖書,以三種不同的版型根據螢幕大小進行切換,最後呈現的結果畫面如下:

  

以上三種版型的 media queries 斷點資訊如下:

斷點
說明
min-width:561px
寬度大於 560px 的螢幕套用。
min-width:991px
寬度大於 1000px 的螢幕套用。

為了簡化設計同時避免過寬的網頁不容易瀏覽,因此以四欄佈局進行設計,於超過 990px寬度時完整顯示四本書的封面與資訊,利用 ul 元素配置書籍資訊,每一個 ul 元素包含四組封面圖片與相關書籍資訊如下:

<ul>
 <li>
              <figure>
                    <div>
                        <div><img src="images/bookinfo/html5b.jpg" /></div>
                        <div>
                            <p><a href="…" target="_blank">藍海文化</a></p>    
                            <p>2013.09.01</p>                             
                            <p>定價:550</p>
                            <p>頁數:496</p>
                            <p class="tag"><a href="#">Look </a></p>
                            <p><a href="…" target="_blank">博客來</a></p>
                            <p><a href="…" target="_blank">天瓏</a></p>                               
                        </div>
                    </div>
                    <figcaption>HTML5從零開始</figcaption>
                </figure>
            </li>
            <li>
                <figure>
                   …
                </figure>
            </li>
             <li>
                <figure>
                   …
                </figure>
            </li>
            <li>
                <figure>
                   …
                </figure>
            </li>
</ul>

完成HTML的定義之後,接下來是設定網頁元素的尺寸配置。從螢幕尺寸最小的行動裝置開始,內容以單欄呈現,因此 ul 與 li 元素樣式設定如下:

ul {
    width: 96%;  
    margin:0 auto;
}
li {
    width:100%;
    padding: 0.4em;
    margin-top:1em;  
}

ul 設為 96% 螢幕寬度,li 則設定為 100% ,如此一來所有的 li 將以單欄呈現垂直配置於網頁。當螢幕大小超過第一個斷點-max-width:561px,套用以下的樣式:

@media screen and (min-width:561px) {
    li {
        width: 50%;
        float: left;
    }  
}

其中將 li 寬度設定為 50% ,如此一來每個 li 元素將佔據 ul 元素的一半寬度,將其 float 設定為浮動因此畫面中的內容將以兩欄呈現。如果螢幕寬度超過 990px,則套用第二個斷點-min-width:991px,內容如下:

@media screen and (min-width:991px) {
    figure > div > div:nth-child(2) {
        width: auto;
    }
    li {
        width: 25% ;
   }
    ul {
        width:940.8px;
      
    }
    header, #bookinfo {
        width: 970px;
    }
}

每一個 li 設定為 25% ,並且將 ul 設定為固定寬度,如此一來ul元素可以同時配置四個 li 元素,而且畫面的內容將以固定的寬度呈現。

RWD 系列文章 》


沒有留言: