改版這事情 @ 褪色的世界．斑剝的記憶

用了近6年的iPhone 5，今年首次申辦行動網路，開始將自己使用超過10年的網頁改版，當下採用了非常受歡迎的Bootstrap。

參考這篇文章，下載css及JavaScript等檔案，在<head>...</head>之間引入，就可以開始使用Bootstrap預先定義好的眾多元件，當然客製化也是沒問題的。

於是乎，在一知半解之下，很快就完成首頁了(笑)。

當拿出iPhone 5(作業系統是iOS 8.3)開啟我那成品時，結果意外令人崩潰，iOS 8似乎不完全支援Bootstrap 4！
查了一下有沒有解決辦法，看到幾句話”Is iOS 8 supposed to be supported?”、”This is far too many users (and revenue) just to ignore.”

好吧～只好單純用CSS去改了，上w3schools找了些範例微調，一下子就完成了Responsive Web Design(笑)。

碗盤不是很重要，料理才是重點。更正，我要說的是：版面不是很重要，內容才是重點。
當然不是很重要也不能完全不管，總不能是：你明明點了一碗乾拌麵，店家卻給你湯匙，至少給雙筷子(或叉子)吧？！
結論：容易閱讀的版面即可。

既然個人網站改好了，部落格就是順手的事了。

在此之前是用candy所設計的版，個人非常喜歡candy的設計風格，所以這版型在一開始用Pixnet Blog就套上了(笑)，算起來用了也近10年囉。
這款的小缺點就是寬度不夠，圖片只能配合版型去調整...字型最高只能調到13點，超過會hen LOW。
candy設計

▲沉靜樣式

痞客邦部落格的樣式明明提供幾款RWD的版型，但是用行動裝置上開Pixnet Blog會被強迫用廣告很多的手機版(嘆氣)，不過在行動裝置上也可以選擇用電腦版閱讀，於是我選擇【[RWD]AlbumStyle】，但發現這個樣式的RWD沒有設計好，因此參考【[RWD]EndlessSquare Stylish】做了一些調整。

首先把【[RWD]AlbumStyle】加點寬，再運用@media屬性，大致如下：

/*----------單一文章調整---------------*/
#article-main #content{}
#article-main .article{
        float: none;
   padding-bottom: 40px;
   height: auto;
   transition:all 0.5s;
}
/*如果螢幕寬度為1158px以上，套用這些css設定*/
@media screen and (min-width: 1158px) {
   #blog-main .article{
       height: auto;
                overflow: hidden;
   }
}
/*螢幕寬度在768px~1158px，套用這些css設定*/
@media screen and (min-width:768px) and (max-width:1158px) {
   #container2{
    width: 100%;
   }
   #links{
    width: 24%;
   }
   .box-title{
    width: 100%;
   }
   #content{
    width: 70%;
   }
   #article-main .article{
   float: none;
   }
   .article{
   transition:all 0.5s;
   position: relative;
   width: 100%;
   height: auto;
   float: left;
   }
       .article-content-inner img {
   max-width: 100%;
   height: auto;
   }
}
/*螢幕寬度為767px以下，套用這些css設定*/
@media screen and (max-width: 767px) {
   #container2{
    width: 100%;
   }
   #links{
    width: 100%;
    box-sizing: border-box;
   }
   .box-title{
    width: 100%;
   }
   #content{
    width: 100%;
    box-sizing: border-box;
   }
   .article{
   transition:all 0.5s;
   position: relative;
   width: 100%;
   height: auto;
   float: left;
   }
        .article-content-inner img {
   max-width: 100%;
   height: auto;
   }
        ...........
}

其實每一個痞客邦樣式都是可以下載來研究的，只要對著網頁隨便一個地方按右鍵>檢視原始碼，原始碼偏上的這一行，就是該Pixnet Blog的樣式...
<link rel="stylesheet" href="https://css.pixnet.in/blog/xxxxxx/normal.css?v=2018121900" type="text/css">

在瀏覽器看到的東西都是下載下來的...研究歸研究，該有的尊重還是要有的。