RWD 系列文章 》
此頁面彙整工作室曾經出版的部份圖書，以三種不同的版型根據螢幕大小進行切換，最後呈現的結果畫面如下：
以上三種版型的 media queries 斷點資訊如下：
為了簡化設計同時避免過寬的網頁不容易瀏覽，因此以四欄佈局進行設計，於超過 990px寬度時完整顯示四本書的封面與資訊，利用 ul 元素配置書籍資訊，每一個 ul 元素包含四組封面圖片與相關書籍資訊如下：
完成HTML的定義之後，接下來是設定網頁元素的尺寸配置。從螢幕尺寸最小的行動裝置開始，內容以單欄呈現，因此 ul 與 li 元素樣式設定如下：
ul 設為 96% 螢幕寬度，li 則設定為 100% ，如此一來所有的 li 將以單欄呈現垂直配置於網頁。當螢幕大小超過第一個斷點－max-width:561px，套用以下的樣式：
其中將 li 寬度設定為 50% ，如此一來每個 li 元素將佔據 ul 元素的一半寬度，將其 float 設定為浮動因此畫面中的內容將以兩欄呈現。如果螢幕寬度超過 990px，則套用第二個斷點－min-width:991px，內容如下：
每一個 li 設定為 25% ，並且將 ul 設定為固定寬度，如此一來ul元素可以同時配置四個 li 元素，而且畫面的內容將以固定的寬度呈現。
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 系列文章 》
沒有留言:
張貼留言