RWD/style

本章節主要為style.css在轉變為RWD網站時，所需要做之更動。(以振鐸網站為例)
整個RWD網站風格與架構是由style.css、theme.php兩者一起的，所以在更動時務必參考另外一個程式，做出相應的變更。
style.css主要是架構出物件的特性，物件的放置要在theme.php中才會寫到，要更動網頁時務必確認物件特性和物件放置兩者皆有做到再更新！
本頁面為主題式頁面，每個段落分別對應不同的RWD需求，沒有誰先誰後的順序問題。
更改之前的程式可參照stylebackup.css，更改之後可參照style.css。

RWD 整體畫面視覺

因為本來的設定只有桌機的顯示，我們現在要更動為手機、平板皆可顯示的話，就需要在css檔案中做一些判斷與變動。
從參照的原始stylebackup.css中，我們需要更改的其實只有前58行而已。以下詳述如何更動整體視覺：

1. 首先將要做出判斷變更的程式(前58行)，用@media screen { }包在大括號中
   • 原始程式：body{ ... } #header{ ... }... → @media screen { body{ ... } #header{ ... }... }
2. 複製整個@media screen { }，並在原本程式後貼上，並在其後加上and (max-width:480px)
   • 原始程式：@media screen {...} → @media screen {...} @media screen and (max-width:480px){ ...}//讓其判斷小於480px的要怎麼顯示
   • 本頁面以480px為例，以下均在480px的@media screen and (max-width:480px){ ...}下做更動。若是想要更多可適應螢幕寬度就多複製幾次，改480px的數字大小即可。(注意，@media screen要由大到小排列)
   1. 更改body中的width，設定為100%，符合螢幕寬度；更改color#FFF，改成全白(選擇性)；新增height為auto，讓網頁符合螢幕大小。
      • 原始程式：body{width: 822px;backgroundcolor:#000;} → body{width:100%;height:auto;backgroundcolor:#FFF;}// 讓網頁符合想要的設定
   2. 新增img中的width，同樣設定為100%，並設定z-index=100，讓其有基本高度，方便之後調整選單及頁首之前後關係。
      • 原始程式：img {...} →img {... z-index:100; width:100%!important; /*寬度"強制"壓縮至頁面寬*/}
      • 其中!important非必要，只是因為此處需要強制蓋過先前的設定所以才加上，可以不加!important就不要加。
   3. 更改#xo-banner中的width，設定為100%，符合螢幕寬度。
      • 原始程式：#xo-banner{width: 822px;} → #xo-banner{width:100%;}// 讓橫幅符合螢幕寬度
   4. 新增#xo-globalnav，使其在手機板中隱藏選單。
      • 原始程式：#xo-globalnav{...} → #xo-globalnav{...display:none}// 讓#xo-globalnav隱藏

選單更改 (漢堡選單 箭頭動畫

本章節著重在漢堡選單的製作上，現今手機及平板上的選單，因為滑鼠滑動被改成手指點選，必須在選單上做一些更動，才能更加的人性化，符合使用者需求。
本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述：(同上述，以下變更均在均在480px的@media screen and (max-width:480px){ ...} 內做更動)

1. 漢堡表單製作
   本小節中，將自行畫出一個漢堡選單(若不知道漢堡選單的定義可以參見下方參考資料)，並加入選單的動畫設定。詳細新增的部分如下
   1. 新增漢堡選單方塊，並設定其顏色、高度、寬度、顯示及深度。
      • .hamburger {
        background-color: #000000;/*顏色黑色*/
        width: 50px;/*寬度50*/
        height: 50px;/*高度50 正方形*/
        position: absolute;/*絕對位置*/
        top: 10px;/*距離上方10px*/
        right: 20px;/*距離右方20px*/
        display: block;/*方塊顯示*/
        z-index: 200;/*高度200*/}
   2. 新增漢堡選單線條(三橫槓)，並設定其顏色、高度、寬度、位置、顯示及深度。
      • .hamburger-line {
        width: 40px; /*寬40*/
        height: 3px; /*高3 (線)*/
        background-color: #ffffff;/*白色*/
        margin: auto; /*置中*/
        position: absolute; /*絕對位置*/
        top: 0;/*距離上方0*/
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 210; /*高度210 (RWD選單按鈕之上)*/
        box-shadow: 0px 10px 0px #ffffff, 0px -10px 0px #ffffff;/*製作陰影*/ }
   3. 改變#xo-globalnav選單頁面設定，使其固定在左側，高度全滿，暫時隱藏在左邊的浮動選單。(直接把之前的改掉)
      • #xo-globalnav {
        background-color: #eee;/*背景灰白*/
        height: 100vh; /*高度全滿*/
        width: 50%; /*寬度40%*/
        position: absolute;/*絕對位置*/
        top: 0;/*距上0*/
        left: 0; /*距左0*/
        z-index: 100; /*高度100 遮住字體工具箱 內容*/
        transform: translateX(-100%);/*先往左移100%(隱藏)*/
        transition: 0.5s; /* 移動時間0.5s */}
      • 測試xo-globalnav選單的寬度，依據不同視窗選取不同比例 (螢幕寬480px以下可能用50%恰當，780px以下可能用40%恰當)
   4. 新增一個核取方塊，判斷漢堡選單是否被點選。
      • #menu-switcher {display: none;/*隱藏*/}
   5. 新增核取方塊被點選時的動畫(往右浮出)
      • #menu-switcher:checked ~ #xo-globalnav {transform: translateX(0%);/*選單會回歸原始位置 再按一次退回左方*/}
   6. 更改設定#xo-globalnav li選單設定，使其在左方選單頁面畫出一格一格的選單。
      • #xo-globalnav li {
        display: block; /* 將資料顯示在同一行不分段 */
        padding:15px;
        margin: 0 20px 10px;
        padding-left: 3px;
        padding-right: 3px;
        color: #ffffff; /*白色 */
        text-decoration: none;
        text-transform: uppercase;
        font-size: 20px;
        text-align: center; /*置中*/
        border-bottom: 3px solid #000; /*底線黑色*/}
   7. 更改設定，使選單的字靠左對齊。
      • #xo-globalnav a {...} → #xo-globalnav a {...margin: auto;}
2. 箭頭動畫
   本小節中，將在選單內畫出一個箭頭，並做出旋轉的動畫設定。詳細新增的部分如下
   1. 先畫出箭頭，劃出一橫一豎兩條線，並旋轉45度。
      • .arrow {
        float:right;
        margin-top:10px;
        margin-right:5px;
        width: 5px;
        height: 5px;
        border-top: 2px solid black; /* 箭頭颜色 */
        border-right: 2px solid black; /* 箭頭颜色 */
        transform: rotate(45deg);
        transition: all 0.5s ease 0s;/*all是所有屬性都将獲得動畫效果 0.5秒完成動畫 ease(逐漸變慢)*/}
   2. 再來加入滑鼠滑到箭頭內的動畫，滑進去(或點選)就旋轉90度。
      • #xo-globalnav a:hover .arrow{
        transform: rotate(135deg);/*旋转180度*/
        margin-top:10px;}

頁首頁尾

本章節是將原本沒有頁首頁尾的網頁加上頁首頁尾。並讓頁首可以隨著手機畫面滑動而跟著向下移動。並在頁尾加上一些網站資訊方便連絡。方法如下(同上述，以下變更均在均在480px的@media screen and (max-width:480px){ ...} 內做更動)

1. 新增頁首
   • header {
     height:60px; /*高度*/
     width: 100%; /* 寬度占畫面100% */
     display: block; /*顯示方塊*/
     margin: 0 auto; /* 加auto可讓整個body左右置中 */
     color: #FFF; /* 灰底白字 */
     background-color: #999;
     padding: 0 ;
     text-align: center; /* 文字置中 */
     z-index: 50; /* 讓他高度低於圖片高度 */
     position: fixed; /* 位置固定在螢幕上方 */}
2. 新增頁尾
   • footer {
     margin: 0 auto; /* 加auto可讓整個body左右置中 */
     color: #FFF; /* 灰底白字 */
     background-color: #999;
     padding: 0 10px 0 10px;
     text-align: center; /* 文字置中 */}

字體工具箱

在RWD網頁中，我們有時候需要更改文字大小才會方便在小螢幕上閱讀，讓使用者體驗更好！本章節是將原本無法改變字體大小的網頁，加上一個字體工具箱，使其可以改變字體大小。方法如下(同上述，以下變更均在均在480px的@media screen and (max-width:480px){ ...} 內做更動)

• font_box{
  width: 200px;
  height: 150px;
  position: absolute;
  top: 160px;
  right: 250px;
  display: block;
  z-index: 0;
  color:#000;}

參考資料

• 漢堡選單介紹： https://news.gandi.net/zh-hant/2020/10/what-is-a-hamburger-menu/