RWD 書籍展示頁


善用RWD讓網頁可以輕易跨不同尺寸的裝置適當呈現,我們利用工作室出版的《HTML5完全風暴》書籍頁為例,實作另外一種常見的版型,在各種不同寬度螢幕的裝置呈現結果如下:

 

這個網頁主要以 600px 為斷點,小於這個斷點選單會被隱藏並提供切換按鈕,同時以單欄呈現,反之則是正常尺寸顯示,列舉所需的斷點設定:

@media screen and (max-width:600px) {
    .nav-list li {
        border-top:1px solid silver;
    }
}


@media screen and (min-width:601px) {   
    #logo {
        float: left;
    }
    #listbutton {
        display: none;
    }
    aside {
        width: 32%;
        float: right;
    }
    .main {
        float: left;
        width: 65.5%;
    }
    #menu-list{
        float:left;
    }
    #menu-list li {
        float: left;
        margin-left: 1em;
        border-bottom: 0px;
    }
} 

另外還有一個斷點是 960px ,以下是螢幕寬度大於此斷點呈現的完整內容。



設定此斷點主要是為了切換其中的大圖,當螢幕寬度大於這個尺寸,因為呈現空間變大,因此透過 JavaScript 更換其中的圖片為完整書籍封面橫幅。為了動態調整圖片載入,預先於圖片呈現區域配置一個 figure 標籤:

<figure id="bookcover">
</figure>

接下來為需要的 JavaScript ,分別於網頁載入、螢幕尺寸發生改變時調用。

function setBookcover(ww) {
    if (ww > 960) {
        var url = "/images/book/book_full.jpg";
    } else {
        var url = "/images/book/book.jpg";
    }
    var img = new Image();
    img.onload = function () {
        if (document.getElementById('bookcover').hasChildNodes) {
            document.getElementById('bookcover').removeChild(
                document.getElementById('bookcover').firstChild
                );
        }
        document.getElementById('bookcover').appendChild(img);
    };
    img.src = url;
}



沒有留言: