"RWD/style" 修訂間的差異

出自 全民科學平台
前往: 導覽搜尋
(RWD 整體畫面視覺(body寬度 選單欄長度 施工中 很亂)
(選單更改 (漢堡選單 箭頭動畫))
 
(未顯示同一使用者於中間所作的 15 次修訂)
行 1: 行 1:
 
[[分類:平台]]
 
[[分類:平台]]
  
===RWD 整體畫面視覺(body寬度 選單欄長度    施工中 很亂===
+
本章節主要為style.css在轉變為RWD網站時,所需要做之更動。(以振鐸網站為例)<br>
# 更動部分
+
整個RWD網站風格與架構是由style.css、theme.php兩者一起的,所以在更動時務必參考另外一個程式,做出相應的變更。<br>
#*新增@media screen and (max-width:480px) // 讓其判斷小於480px的要怎麼顯示
+
style.css主要是架構出物件的特性,物件的放置要在theme.php中才會寫到,要更動網頁時務必確認物件特性和物件放置兩者皆有做到再更新!<br>
#*更改body width 100% height auto   // 讓網頁符合螢幕大小 並自動縮放圖片
+
本頁面為主題式頁面,每個段落分別對應不同的RWD需求,沒有誰先誰後的順序問題。<br>
#*更改body color // 改成全白
+
更改之前的程式可參照stylebackup.css,更改之後可參照style.css。(位置在檔案櫃中 /全民科學平台/RWD/)
#*更改img width 100%!important; // 讓圖片符合螢幕大小 並覆蓋之前的設定
+
===RWD 整體畫面視覺===
#*更改 #xo-banner width   // 同上
+
因為本來的設定只有桌機的顯示,我們現在要更動為手機、平板皆可顯示的話,就需要在css檔案中做一些判斷與變動。<br>
#*更改 #xo-globalnav display:none //手機板先隱藏選項欄
+
從參照的原始stylebackup.css中,我們需要更改的其實只有前58行而已。以下詳述如何更動整體視覺:
#*改變圖片z位置
+
#首先將要做出判斷變更的程式(前58行),用@media screen { }包在大括號中
#*@media screen and (max-width:768px){ 新增平板選項
+
#*原始程式:body{ ... } #header{ ... }... → <span style="color:red;">@media screen {</span> body{ ... } #header{ ... }...<span style="color:red;"> }</span>...
#*menu.css 改變 margin auto 但看似沒變化
+
#複製整個@media screen { },並在原本程式後貼上,並在其後加上and (max-width:480px)
#選單更改 (漢堡選單 箭頭動畫
+
#*原始程式:@media screen {...}... → @media screen {...} <span style="color:red;">@media screen and (max-width:480px){ ...}</span>...//讓其判斷小於480px的要怎麼顯示
##漢堡表單製作
+
#*本頁面以480px為例,以下均在480px的@media screen and (max-width:480px){ ...}下做更動。若是想要更多可適應螢幕寬度就多複製幾次,改480px的數字大小即可。<b>(注意,@media screen要由大到小排列)</b>
##*stylemobile.css 新增
+
##更改body中的width,設定為100%,符合螢幕寬度;更改color#FFF,改成全白(選擇性);新增height為auto,讓網頁符合螢幕大小。
##*.hamburger {                      /*增加漢堡選單方塊*/
+
##*原始程式:body{width: 822px;backgroundcolor:#000;} → body{<span style="color:red;">width:100%;height:auto;backgroundcolor:#FFF;</span>}// 讓網頁符合想要的設定
##*.hamburger-line {                   /*增加漢堡選單線條*/
+
##新增img中的width,同樣設定為100%,並設定z-index=100,讓其有基本高度,方便之後調整選單及頁首之前後關係。
##*改變 #xo-globalnav {                     /* 側攔
+
##*原始程式:img {...} →img {... <span style="color:red;">z-index:100;  width:100%!important; /*寬度"強制"壓縮至頁面寬*/</span>}
##* #menu-switcher:checked ~ #xo-globalnav {    /*動畫
+
##*其中!important非必要,只是因為此處需要強制蓋過先前的設定所以才加上,可以不加!important就不要加。
##* #menu-switcher {                     /*隱藏選項
+
##更改#xo-banner中的width,設定為100%,符合螢幕寬度。
##*更改設定#xo-globalnav li {
+
##*原始程式:#xo-banner{width: 822px;} → #xo-banner{<span style="color:red;">width:100%;</span>}// 讓橫幅符合螢幕寬度
##* #xo-globalnav a {
+
##新增#xo-globalnav,使其在手機板中隱藏選單。
##*style.css 中更改選單列 浮出寬度
+
##*原始程式:#xo-globalnav{...} → #xo-globalnav{...<span style="color:red;">display:none</span>}// 讓#xo-globalnav隱藏
##*xo-globalnav { width: 50%;  (螢幕寬480px以下
+
 
##*xo-globalnav { width: 40%;   (螢幕寬768px以下
+
===選單更改 (漢堡選單 箭頭動畫)===
## 箭頭動畫
+
本章節著重在漢堡選單的製作上,現今手機及平板上的選單,因為滑鼠滑動被改成手指點選,必須在選單上做一些更動,才能更加的人性化,符合使用者需求。<br>本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述:(同上述,以下變更均在均在480px的@media screen and (max-width:480px){ ...} 內做更動)
##* .arrow {
+
#漢堡表單製作<br>本小節中,將自行畫出一個漢堡選單(若不知道漢堡選單的定義可以參見下方參考資料),並加入選單的動畫設定。詳細新增的部分如下
##* float:right;
+
##新增漢堡選單方塊,並設定其顏色、高度、寬度、顯示及深度。
##* margin-top:10px;
+
##* .hamburger {<br>background-color: #000000;/*顏色黑色*/<br>width: 50px;/*寬度50*/<br>height: 50px;/*高度50 正方形*/<br>position: absolute;/*絕對位置*/<br>top: 10px;/*距離上方10px*/<br>right: 20px;/*距離右方20px*/<br>display: block;/*方塊顯示*/<br>z-index: 200;/*高度200*/}
##* margin-right:5px;
+
##新增漢堡選單線條(三橫槓),並設定其顏色、高度、寬度、位置、顯示及深度。
##* width: 5px;
+
##* .hamburger-line {<br> width: 40px; /*寬40*/<br>  height: 3px; /*高3 (線)*/<br> background-color: #ffffff;/*白色*/<br>  margin: auto; /*置中*/<br> position: absolute; /*絕對位置*/<br>   top: 0;/*距離上方0*/<br>  left: 0;<br> right: 0; <br>  bottom: 0;<br> z-index: 210; /*高度210 (RWD選單按鈕之上)*/<br>   box-shadow: 0px 10px 0px #ffffff, 0px -10px 0px #ffffff;/*製作陰影*/ }
##* height: 5px;
+
##改變#xo-globalnav選單頁面設定,使其固定在左側,高度全滿,暫時隱藏在左邊的浮動選單。(直接把之前的改掉)
##* border-top: 2px solid black;  /* 箭頭颜色 */
+
##* #xo-globalnav {<br>background-color: #eee;/*背景灰白*/<br>height: 100vh; /*高度全滿*/<br>width: 50%; /*寬度40%*/<br>position: absolute;/*絕對位置*/<br>top: 0;/*距上0*/<br>left: 0; /*距左0*/<br>z-index: 100; /*高度100 遮住字體工具箱 內容*/<br>transform: translateX(-100%);/*先往左移100%(隱藏)*/<br>transition: 0.5s; /* 移動時間0.5s */}
##* border-right: 2px solid black; /* 箭頭颜色 */
+
##*測試xo-globalnav選單的寬度,依據不同視窗選取不同比例 (螢幕寬480px以下可能用50%恰當,780px以下可能用40%恰當)
##* transform: rotate(45deg);
+
##新增一個核取方塊,判斷漢堡選單是否被點選。
##* transition: all 0.5s ease 0s;/*all是所有屬性都将獲得動畫效果  0.5秒完成動畫 ease(逐漸變慢)*/}
+
##* #menu-switcher {display: none;/*隱藏*/}
##* #xo-globalnav a:hover .arrow{
+
##新增核取方塊被點選時的動畫(往右浮出)
##* transform: rotate(135deg);/*旋转180度*/
+
##* #menu-switcher:checked ~ #xo-globalnav {transform: translateX(0%);/*選單會回歸原始位置 再按一次退回左方*/}
##* /*transform: rotate(-45deg);*/ /*逆旋转180度*/
+
##更改設定#xo-globalnav li選單設定,使其在左方選單頁面畫出一格一格的選單。(同#xo-globalnav,直接改掉)
##* margin-top:10px;}
+
##* #xo-globalnav li {<br> display: block; /* 將資料顯示在同一行不分段 */<br> padding:15px;<br>  margin: 0 20px 10px;<br>    padding-left:          3px;<br>    padding-right:          3px;<br> color: #ffffff; /*白色 */<br>text-decoration: none;<br>   text-transform: uppercase;<br> font-size: 20px;<br>   text-align: center; /*置中*/<br>border-bottom: 3px solid #000; /*底線黑色*/}
#頁首頁尾
+
##更改設定,使選單的字靠左對齊。
#* #header {
+
##* #xo-globalnav a {...} → #xo-globalnav a {...<span style="color:red;">margin:                 auto;</span>} 
#*height: 60px;
+
# 箭頭動畫<br>本小節中,將在選單內畫出一個箭頭,並做出旋轉的動畫設定。本頁面提供兩個方法,詳細新增的部分如下
#*width: 70%;   /* 讓他小於圖片寬度 */
+
##第一種方法(hover事件),本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫,優點為改動不多,缺點則是在RWD狀況下較難操縱,因為平板、手機沒有滑鼠,事件設定會比較不一樣。若是在設計RWD的頁面推薦第二種方法。
#*margin:                 0 auto; /* 加auto可讓整個body左右置中 */
+
###先畫出箭頭,劃出一橫一豎兩條線,並旋轉45度。
#*color:                 #FFF; /* 灰底白字 */
+
###* .arrow {<br> float:right;<br> margin-top:10px;<br> margin-right:5px;<br> width: 5px;<br> height: 5px;<br> border-top: 2px solid black;  /* 箭頭颜色 */<br> border-right: 2px solid black; /* 箭頭颜色 */<br> transform: rotate(45deg);<br> transition: all 0.5s ease 0s;/*all是所有屬性都将獲得動畫效果  0.5秒完成動畫 ease(逐漸變慢)*/}
#*background-color:      #999;
+
###再來加入滑鼠滑到箭頭內的動畫,滑進去(或點選)就旋轉90度。
#*padding:               0 10px 0 10px;
+
###* #xo-globalnav a:hover .arrow{<br> transform: rotate(135deg);/*旋轉180度*/<br> margin-top:10px;}
#*text-align: center; /* 文字置中 */
+
##第二種方法(click事件):本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫,優點為較符合RWD的設計,缺點則是要多寫一段Javascript碼,改動幅度較大。若是不想那麼複雜,可以先改動成第一種方法看效果。
#*z-index: 50; /* 高度在圖片下方 */
+
###同第一種方法,先畫出箭頭,劃出一橫一豎兩條線,並旋轉45度。
#*position: absolute;     /*固定在圖片後不顯示*/}
+
###* .arrow {<br> float:right;<br> margin-top:10px;<br> margin-right:5px;<br> width: 5px;<br> height: 5px;<br> border-top: 2px solid black;  /* 箭頭颜色 */<br> border-right: 2px solid black; /* 箭頭颜色 */<br> transform: rotate(45deg);<br> transition: all 0.5s ease 0s;/*all是所有屬性都将獲得動畫效果  0.5秒完成動畫 ease(逐漸變慢)*/}
#* #footer {
+
###加入.sub-menu屬性,使其靠左對齊(不然會有多餘的縮排)
#*margin:                0 auto; /* 加auto可讓整個body左右置中 */
+
###*.sub-menu{padding:0; )
#*color:                  #FFF; /* 灰底白字 */
+
###將style.css以及menu.css中所有hover事件註解,使其無法作用,否則可能會與click事件互相影響
#*background-color:      #999;
+
###*menu.css中36行左右的/*.navigation li dt a:visited {...} */
#*padding:                0 10px 0 10px;
+
###*menu.css中48行左右的/*.navigation li:hover dd,{...}*/
#*text-align: center; /* 文字置中 */}
+
###*menu.css中49行左右的/* .navigation li a:active dd {...}*/
#字體工具箱
+
###*style.css中97及253行左右的/* #xo-globalnav a:hover .arrow{...}*/
#*font_box{
+
 
#* width: 200px;
+
===頁首頁尾===
#* height: 150px;
+
本章節是將原本沒有頁首頁尾的網頁加上頁首頁尾。並讓頁首可以隨著手機畫面滑動而跟著向下移動。並在頁尾加上一些網站資訊方便連絡。方法如下(同上述,以下變更均在均在480px的@media screen and (max-width:480px){ ...} 內做更動)
#* position: absolute;
+
#新增頁首
#*   top: 160px;
+
#*header {<br>height:60px;   /*高度*/<br>width: 100%;   /* 寬度占畫面100% */<br>display: block; /*顯示方塊*/<br>margin: 0 auto; /* 加auto可讓整個body左右置中 */<br>color:     #FFF; /* 灰底白字 */<br>background-color:      #999;<br>padding: 0 ;<br>text-align: center; /* 文字置中 */<br>z-index: 50;     /* 讓他高度低於圖片高度 */<br>position: fixed; /* 位置固定在螢幕上方 */}
#*   right: 250px;
+
#新增頁尾
#*   display: block;
+
#*footer {<br>margin:                0 auto; /* 加auto可讓整個body左右置中 */<br>color:                  #FFF; /* 灰底白字 */<br>background-color:      #999;<br>padding:                0 10px 0 10px;<br>text-align: center; /* 文字置中 */}
#*   z-index: 0;
+
===字體工具箱===
#*   color:#000;}
+
在RWD網頁中,我們有時候需要更改文字大小才會方便在小螢幕上閱讀,讓使用者體驗更好!本章節是將原本無法改變字體大小的網頁,加上一個字體工具箱,使其可以改變字體大小。方法如下(同上述,以下變更均在均在480px的@media screen and (max-width:480px){ ...} 內做更動)
 +
#新增字體工具箱物件特性
 +
#*font_box{<br> width: 200px;<br> height: 10px;/*不要太高,會蓋過底下的js互動*/<br> position: absolute;<br>   top: 160px;<br>   right: 250px;<br>   display: block;<br>   z-index: 0;<br>   color:#000;}
 +
 
 +
===參考資料===
 +
*漢堡選單介紹: https://news.gandi.net/zh-hant/2020/10/what-is-a-hamburger-menu/

於 2022年2月23日 (三) 10:31 的最新修訂


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

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,直接改掉)
      • #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. 第一種方法(hover事件),本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫,優點為改動不多,缺點則是在RWD狀況下較難操縱,因為平板、手機沒有滑鼠,事件設定會比較不一樣。若是在設計RWD的頁面推薦第二種方法。
      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;}
    2. 第二種方法(click事件):本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫,優點為較符合RWD的設計,缺點則是要多寫一段Javascript碼,改動幅度較大。若是不想那麼複雜,可以先改動成第一種方法看效果。
      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. 加入.sub-menu屬性,使其靠左對齊(不然會有多餘的縮排)
        • .sub-menu{padding:0; )
      3. 將style.css以及menu.css中所有hover事件註解,使其無法作用,否則可能會與click事件互相影響
        • menu.css中36行左右的/*.navigation li dt a:visited {...} */
        • menu.css中48行左右的/*.navigation li:hover dd,{...}*/
        • menu.css中49行左右的/* .navigation li a:active dd {...}*/
        • style.css中97及253行左右的/* #xo-globalnav a:hover .arrow{...}*/

頁首頁尾

本章節是將原本沒有頁首頁尾的網頁加上頁首頁尾。並讓頁首可以隨著手機畫面滑動而跟著向下移動。並在頁尾加上一些網站資訊方便連絡。方法如下(同上述,以下變更均在均在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){ ...} 內做更動)

  1. 新增字體工具箱物件特性
    • font_box{
      width: 200px;
      height: 10px;/*不要太高,會蓋過底下的js互動*/
      position: absolute;
      top: 160px;
      right: 250px;
      display: block;
      z-index: 0;
      color:#000;}

參考資料