什麼是 RWD ?

隨著網路時代的快速發展，各種行動裝置已經成為瀏覽網頁的重要載具。因此，過去的網站設計模式也必須因應時代的演進。最早是在 2010 年，由 Ethan Marcotte 提出的一種想法，他認為網站設計必須能夠根據不同視窗環境自動調整樣式的呈現，稱為 RWD（Responsive Web Design，響應式網站設計）。 RWD 能夠使網站不侷限在傳統的大螢幕下，成為了這個潮流中延伸出來的一種網站的設計模式。在過去幾年的發展中， RWD 已經是現代化網站必備的條件之一。

為什麼 RWD ?

網站必須要考慮到這種使用的體驗，因此也必須考慮到來自不同大小螢幕的使用者。讓每一種視窗環境的瀏覽者都達到最佳的瀏覽效果，是每一個網站設計的重要工作。在這種情況下， RWD 是一種快速有效的設計模式，建構原本網站架構，讓前端能夠隨著瀏覽器自動調整。 有些開發者會針對行動裝置開發 Native APP ，必須根據不同的裝置環境重新開發，大幅增加開發成本。

怎麼做 RWD ?

RWD 有幾種實作方式，一種是採用 Grid 的設計，或是使用 CSS @media 的屬性。

Grid

Grid 是 CSS Framework 因應 RWD 而產生的一種慣例，將網站默認為 12 欄位，根據不同的尺寸調整使用欄位的寬度。

以 Bootstrap 來說： col-md-x col-sm-x col-xs-x col-lg-x ，是針對不同的尺寸設定不同的使用寬度。

1
2
3
4
<div class="row">
    <div class="col-md-2 col-sm-4 col-xs-8 col-lg-12">
    </div>
</div>

@media

另一種做法，直接採用 CSS 的屬性 @media，針對不同的尺寸，設定不同的 CSS。

1
2
3
4
@media screen and (min-width: 400px)  {...}
@media screen and (min-width: 600px)  {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}

Reference

[1] Responsive Web Design
[2] Bootstrap RWD 使用方法及原理

License


本著作由 Chang, Wei-Yaun (v123582) 製作，
以創用CC 姓名標示-相同方式分享 3.0 Unported授權條款釋出。