0715 5xRuby day1

今天整天主要在認識新同學跟架設環境，真沒想到架設環境也需要用到整個下午的時間XD 同學真的是從台灣各地來都有，大部分的同學看起來年紀好像跟我差不多在28左右，大家之前的工作也是各行各業都有，挺有趣的

回家複習了金魚系列鐵人賽的18~22，主要內容在講 1.動畫 2.媒體查詢 3.RWD

18在講transition用法，transition:要轉換的屬性 轉換時間 延遲時間 速度，下面的例子就是分別設定padding跟background-color的轉換速度時間

ex. transition: padding 1s 0s ease, background-color 1s 1s

19在講animation的用法，同樣是動畫卻比transition複雜得多，一般來說會用@keyframes來定義動畫名字跟腳本，再讓要表演動畫的物件插入這個腳本。下面的例子是當滑鼠移動到box這物件身上時，會開始表演av1的動畫。animation: 動畫名稱 播放時間 延遲執行的時間 速度 次數 方向 填充模式 播放狀態

.box:hover{

animation: av1 3s;

}

@keyframes av1{

0%{ border-radius: 50%}

100%{ border-radius: 0%}

}

20在講媒體查詢，是RWD( Responsive web design，響應式網頁設計)的基本，下面範例的意思是:當使用的裝置是螢幕，而且寬度大於等於768的時候，會用這個條件

@media screen and (min-width: 768px){
.amos{
width:50%
float: left
}
}

如果考慮到不同裝置，要在meta那邊加上viewport設定，否則畫面會跑掉

<meta name=”viewport” content=”width=device-width, initial-scale=1.0,
shrink-to-fit=no”>

21跟22主要在做RWD的示範，以下寫出某些小細節:

1. 目前設計時會根據需求來決定是要從電腦出發設計還是桌機
2. 在做滿版的設計時，要考慮到超級寬螢幕，所以通常會設定個max-width
3. 當有物件在用垂直對齊時，初始設定是baseline，因此會有莫名其妙的間隔，解決辦法是使用vertical-align:bottom or top 就是不要baseline