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 系列文章 》
沒有留言:
張貼留言