<head>
    <style type="text/css" rel="stylesheet" href="https://www.tedu.tw/zhuzhan/css/index_news.css"></style>
  </head>

<body>
  <div class="news_p c1">
  <table class="blog">
  <caption>RWD vs AWD 優缺點比較</caption>
  <thead class="blog">

                                <tr class="blog">
                                      <th class="blog"></th>
                                      <th class="blog">RWD</th>
                                      <th class="blog">AWD</th>
                                 </tr>

                          </thead>
                          <tbody>
                                <tr>
                                      <th>相同之處</th>
                                      <td data-label="【RWD】與【AWD】" colspan="2" style="text-align:center;">兩種都會判斷裝置而顯示出對應的樣式。</td>
                                 </tr>

                                <tr>
                                      <th>不同之處</th>
                                      <td data-label="【RWD】">無論行動裝置或是桌機，都使用同一套 CSS。<br>當使用者打開了網頁，就能偵測網頁的寬度而決定要套用哪些 CSS 樣式碼。 </td>
                                      <td data-label="【AWD】">針對各種裝置撰寫對應的 CSS，因此會有多套 CSS，一般來說會有兩套 CSS：桌機專屬的一套 CSS，手機專屬的一套 CSS。<br>當使用者打開了網頁，程式就能自動偵測網頁的寬度而決定要套用哪個 CSS 檔案。 </td>
                                 </tr>


                                <tr>
                                      <th>優點</th>
                                      <td data-label="【RWD】"><strong>節省網站製作成本</strong><br>因為無論是桌機、手機的樣式，全都只塞在同一套 CSS 檔案，所以開發成本較低，適合內容較單純的網站、新創公司或是個人工作室使用。<br>
                                        <br><strong><a href="https://www.tedu.tw/courses/internet-marketing/seo/">SEO</a>更方便</strong><br>因為同一個網頁、URL 也只有一個，所以更方便 <a href="https://www.tedu.tw/courses/internet-marketing/seo/">SEO</a>。
                                      </td>
                                      <td data-label="【AWD】">
                                        <strong>網頁維護更分明，不怕樣式被吃到</strong><br>
                                        雖然成本較 RWD 高，但是由於桌機與手機的 CSS 分別在不同的檔案，因此在維護上會比 RWD 更分明、更能清楚地找到對應的樣式碼，不需要大海撈針。更沒有更改一個 CSS 而影響到不該改變的區塊 style 也改變的後顧之憂。<br>
                                        <br><strong>有利於 UI/UX</strong><br>
                                        若對畫面顯示的要求較高，希望能在各種裝置上畫面都能完美呈現的場合、或是網站內容較多、圖文排版較複雜時，就適用 AWD，可針對不同的瀏覽介面而做出對應的 UI/UX，讓介面更美觀好用、給使用者更佳的網頁瀏覽體驗。<br>
                                        <br><strong>行動裝置網頁載入更快</strong><br>
                                        可針對行動裝置而做優化，將原本的大圖縮減成最合適的尺寸，減少不必要的大圖，就能加快行動裝置的網頁 loading。
                                      </td>
                                 </tr>


                                <tr>
                                      <th>缺點</th>
                                      <td data-label="【RWD】"><strong>開發容易、維護耗時：</strong><br>
                                      全部的樣式碼都一窩蜂塞在同一套 CSS 裡面，所以在網頁維護上較不容易，常常需要大海撈針般找到對應的程式碼。若遇到需要修改的狀況，很可能修改某個樣式碼，卻也影響到了其他不需修改的樣式碼，而導致網站 「跑山」 的窘境。
                                      <br><strong>行動裝置網頁載入恐會更慢</strong><br>
                                        因為所有的裝置都使用同一個 CSS 碼，所以較無法針對行動裝置做圖片顯示的最佳化，加上 RWD 網頁的機制是將資訊先下載後，再根據裝置大小重新排列，所以會較慢。</td>

                                      <br><td data-label="【AWD】"><strong>維護較容易，但開發成本高：</strong><br>
                                      一開始需要針對不同的裝置而寫出好幾套 CSS，耗時耗力，且還需工程師撰寫讓網頁自動感應載具而套用對應 CSS 的程式。若有 SEO 的需求，還需另請工程師將同一網頁的多套 CSS 串在同一個網址內，否則流量會自動被手機與桌機瓜分。</td>
                                 </tr>
                          </tbody>
    </div>
</body>

External CSS

  1. https://www.tedu.tw/zhuzhan/css/index_news.css
  2. https://www.tedu.tw/zhuzhan/css/ku/bootstrap.min.css
  3. https://www.tedu.tw/zhuzhan/css/wj_base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.