Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console