檢視 RWD/style 的原始碼

[[分類:平台]]

本章節主要為style.css在轉變為RWD網站時，所需要做之更動。(以振鐸網站為例)<br>
整個RWD網站風格與架構是由style.css、theme.php兩者一起的，所以在更動時務必參考另外一個程式，做出相應的變更。<br>
style.css主要是架構出物件的特性，物件的放置要在theme.php中才會寫到，要更動網頁時務必確認物件特性和物件放置兩者皆有做到再更新！<br>
本頁面為主題式頁面，每個段落分別對應不同的RWD需求，沒有誰先誰後的順序問題。<br>
更改之前的程式可參照stylebackup.css，更改之後可參照style.css。(位置在檔案櫃中 /全民科學平台/RWD/)
===RWD 整體畫面視覺===
因為本來的設定只有桌機的顯示，我們現在要更動為手機、平板皆可顯示的話，就需要在css檔案中做一些判斷與變動。<br>
從參照的原始stylebackup.css中，我們需要更改的其實只有前58行而已。以下詳述如何更動整體視覺：
#首先將要做出判斷變更的程式(前58行)，用@media screen { }包在大括號中
#*原始程式：body{ ... } #header{ ... }...	→	<span style="color:red;">@media screen {</span> body{ ... } #header{ ... }...<span style="color:red;"> }</span>...
#複製整個@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>
##更改body中的width，設定為100%，符合螢幕寬度；更改color#FFF，改成全白(選擇性)；新增height為auto，讓網頁符合螢幕大小。
##*原始程式：body{width:	822px;backgroundcolor:#000;}	→	body{<span style="color:red;">width:100%;height:auto;backgroundcolor:#FFF;</span>}// 讓網頁符合想要的設定
##新增img中的width，同樣設定為100%，並設定z-index=100，讓其有基本高度，方便之後調整選單及頁首之前後關係。
##*原始程式：img {...}	→img {... <span style="color:red;">z-index:100;  width:100%!important;	/*寬度"強制"壓縮至頁面寬*/</span>}
##*其中!important非必要，只是因為此處需要強制蓋過先前的設定所以才加上，可以不加!important就不要加。
##更改#xo-banner中的width，設定為100%，符合螢幕寬度。
##*原始程式：#xo-banner{width:	822px;}	→	#xo-banner{<span style="color:red;">width:100%;</span>}// 讓橫幅符合螢幕寬度
##新增#xo-globalnav，使其在手機板中隱藏選單。
##*原始程式：#xo-globalnav{...}	→	#xo-globalnav{...<span style="color:red;">display:none</span>}// 讓#xo-globalnav隱藏

===選單更改 (漢堡選單 箭頭動畫)===
本章節著重在漢堡選單的製作上，現今手機及平板上的選單，因為滑鼠滑動被改成手指點選，必須在選單上做一些更動，才能更加的人性化，符合使用者需求。<br>本節分兩小章分別為製作漢堡選單與在選單上加上箭頭動畫。如下詳述：(同上述，以下變更均在均在480px的@media screen and (max-width:480px){ ...} 內做更動)
#漢堡表單製作<br>本小節中，將自行畫出一個漢堡選單(若不知道漢堡選單的定義可以參見下方參考資料)，並加入選單的動畫設定。詳細新增的部分如下
##新增漢堡選單方塊，並設定其顏色、高度、寬度、顯示及深度。
##* .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*/}
##新增漢堡選單線條(三橫槓)，並設定其顏色、高度、寬度、位置、顯示及深度。
##* .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;/*製作陰影*/	}
##改變#xo-globalnav選單頁面設定，使其固定在左側，高度全滿，暫時隱藏在左邊的浮動選單。(直接把之前的改掉)
##* #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 */}
##*測試xo-globalnav選單的寬度，依據不同視窗選取不同比例 (螢幕寬480px以下可能用50%恰當，780px以下可能用40%恰當)
##新增一個核取方塊，判斷漢堡選單是否被點選。
##* #menu-switcher {display: none;/*隱藏*/}
##新增核取方塊被點選時的動畫(往右浮出)
##* #menu-switcher:checked ~ #xo-globalnav {transform: translateX(0%);/*選單會回歸原始位置 再按一次退回左方*/}
##更改設定#xo-globalnav li選單設定，使其在左方選單頁面畫出一格一格的選單。(同#xo-globalnav，直接改掉)
##* #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;		/*底線黑色*/}
##更改設定，使選單的字靠左對齊。
##* #xo-globalnav a {...} →	#xo-globalnav a {...<span style="color:red;">margin:                 auto;</span>}  
# 箭頭動畫<br>本小節中，將在選單內畫出一個箭頭，並做出旋轉的動畫設定。本頁面提供兩個方法，詳細新增的部分如下
##第一種方法(hover事件)，本方法讓滑鼠經過選單時就會觸發箭頭旋轉的動畫，優點為改動不多，缺點則是在RWD狀況下較難操縱，因為平板、手機沒有滑鼠，事件設定會比較不一樣。若是在設計RWD的頁面推薦第二種方法。
###先畫出箭頭，劃出一橫一豎兩條線，並旋轉45度。
###* .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(逐漸變慢)*/}
###再來加入滑鼠滑到箭頭內的動畫，滑進去(或點選)就旋轉90度。
###* #xo-globalnav a:hover .arrow{<br> transform: rotate(135deg);/*旋轉180度*/<br> margin-top:10px;}
##第二種方法(click事件)：本方法讓滑鼠點下選單時才觸發箭頭旋轉的動畫，優點為較符合RWD的設計，缺點則是要多寫一段Javascript碼，改動幅度較大。若是不想那麼複雜，可以先改動成第一種方法看效果。
###同第一種方法，先畫出箭頭，劃出一橫一豎兩條線，並旋轉45度。
###* .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(逐漸變慢)*/}
###加入.sub-menu屬性，使其靠左對齊(不然會有多餘的縮排)
###*.sub-menu{padding:0; )
###將style.css以及menu.css中所有hover事件註解，使其無法作用，否則可能會與click事件互相影響
###*menu.css中的/*.navigation li dt a:visited {...} */
###*menu.css中的/*.navigation li:hover dd,{...}*/
###*menu.css中的/*	.navigation li a:active dd {...}*/
###*style.css中的/*	#xo-globalnav a:hover .arrow{...}*/

===頁首頁尾===
本章節是將原本沒有頁首頁尾的網頁加上頁首頁尾。並讓頁首可以隨著手機畫面滑動而跟著向下移動。並在頁尾加上一些網站資訊方便連絡。方法如下(同上述，以下變更均在均在480px的@media screen and (max-width:480px){ ...} 內做更動)
#新增頁首
#*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;	/* 位置固定在螢幕上方 */}
#新增頁尾
#*footer {<br>margin:                 0 auto;	/* 加auto可讓整個body左右置中 */<br>color:                  #FFF;	/* 灰底白字 */<br>background-color:       #999;<br>padding:                0 10px 0 10px;<br>text-align: 		center; /* 文字置中 */}
===字體工具箱===
在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/