有了工作室網站，現在逐步充實網站內容，利用RWD製作書籍介紹頁 …
文章出處：http://www.kangting.tw/2014/05/rwd_23.html
善用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;
}