不同人有不同的想法，不同職位也有不同的做事角度
對於切版而言有的方法就是比較好切，但對於資料串接就是會很難處理，
「資料串接與切版間的取捨」這個小主題要討論的就是這件事情

今天我們要討論的就切版時很容易遇到的一個議題：「大小版」切法

什麼是「大小版切法」呢？

簡單來說，就是在畫面上的同一個區塊，在大版有一塊HTML，小版有另外一塊HTML。
在大版的時候顯示大版的切法，小版的時候顯示小版的切法

<--! 大版的HTML -->
<div class="pc-version-show template-news">
    ...
</div>
<--! end of 大版的HTML -->

<--! 小版的HTML -->
<div class="mobile-version-show template-news">
    ....
</div>
<--! end of 小版的HTML -->

css裡會在不同的螢幕尺寸下隱藏掉不需要的區塊

// 螢幕尺寸是小版的時候，大版消失
@media (max-width: 1023px){
    .pc-version-show{
        display: none;
    }
}

// 螢幕尺寸是大版的時候，小版消失
@media (min-width: 1024px){
    .mobile-version-show{
        display: none;
    }
}

為什麼會需要大小版切法呢？

通常是因為大小版的畫面非常不一樣，無法用同一塊結構的時候，切版就會切兩塊HTML

看一下實際的例子

假設我們的大版MENU是一個MEGAMENU，小版是一個收在漢堡條的LIST MENU，
這兩塊版面很難只用一個HTML完成，
可以借用一下新光醫院的官網來當範例：

大版MegaMenu

小版漢堡條List Menu

對資料串接有什麼影響呢？

其實蠻容易可以理解的，雖然有兩段不同的HTML但對於資料串接是同一份資料，
原本要套資料的地方只有一個，現在變成兩個，當然就變麻煩囉！

你可能會覺得，那不就是一樣的東西貼兩遍而已嗎？真的有這麼麻煩嗎？
第一、可以完全貼兩遍這件事，是要取決於你的大小版中的需要串接資料的地方也要是相同的結構
第二、後續資料串接或維護的人，會知道這塊有兩個地方要套嗎？
所以基於資料串接麻煩及後續維護，資料串接上真的很不樂見這種大小版的切法

那我們真的不能切大小版嗎？

應該說盡量可以用同一塊結構就不要有兩塊，但有的時候設計出的圖稿就是需要不同的結構不然切不出來，
那怎麼辦？叫設計改圖嗎？
其實也不用那麼極端，如果你判斷這個區塊的確有大小版的必要不然無法切，
你要做的事就是讓串接資料的地方更容易一點，那怎麼更容易呢？除了在HTML結構中標註，
那我們要讓資料串接的時候不會太想殺切版，
於是我們最後的溫柔就是 .. 盡量讓有資料的地方的結構一致啦 XD

重點結論

1. 不要輕易寫出大小版的切版程式，資料串接會想殺人
2. 真的無法必須寫大小版切版，請注意兩點
   • 在HTML程式標註
   • 資料串接的結構要盡量一致