檢視 RWD/style 的原始碼

[[分類:平台]]

===RWD 整體畫面視覺(body寬度 選單欄長度===
# 更動部分
#*更改style.css
#*新增@media screen and (max-width:480px)  // 讓其判斷小於480px的要怎麼顯示
#*更改body width 100% height auto   // 讓網頁符合螢幕大小 並自動縮放圖片
#*更改body color // 改成全白
#*更改img width 	100%!important;  // 讓圖片符合螢幕大小 並覆蓋之前的設定
#*更改	#xo-banner  width    // 同上
#*更改	#xo-globalnav display:none //手機板先隱藏選項欄
#*更改theme.php
#*<meta name="viewport" content="width=device-width, initial-scale=1" />
#*改變圖片z位置
#*@media screen and (max-width:768px){  新增平板選項
#*menu.css 改變 margin auto 但看似沒變化
#*移動theme.php 中 style.css 和 menu.css的位置  方法如下
#*<link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/jquery.makeCollapsible.css' />
#*<link rel='stylesheet' type='text/css' media='screen' href='/mm/treestyles.css' />
#*<link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/".$style_Num."' />
#*<link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/menu.css' />
#選單更改 (漢堡選單 箭頭動畫
##漢堡表單製作
##*theme.php 新增
##*<input type="checkbox" name="menu-switcher" id="menu-switcher" />     
##*<label for="menu-switcher" class="hamburger">
##*<div class="hamburger-line"></div></label>
##*stylemobile.css 新增
##*.hamburger {                       /*增加漢堡選單方塊*/
##*.hamburger-line {                   /*增加漢堡選單線條*/
##*改變	#xo-globalnav {                      /* 側攔
##*  #menu-switcher:checked ~ #xo-globalnav {     /*動畫
##*  #menu-switcher {                     /*隱藏選項
##*更改設定#xo-globalnav li {
##* #xo-globalnav a {
##*style.css 中更改選單列 浮出寬度
##*xo-globalnav {  width: 50%;   (螢幕寬480px以下
##*xo-globalnav {  width: 40%;   (螢幕寬768px以下
## 箭頭動畫
##* style.css更改
##* .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(逐漸變慢)*/}
##* #xo-globalnav a:hover .arrow{
##* transform: rotate(135deg);/*旋转180度*/
##* /*transform: rotate(-45deg);*/ /*逆旋转180度*/
##* margin-top:10px;}
##* theme.php 更改  (將箭頭加進去)