【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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;
}



沒有留言: