CSS3 的新玩意兒

現代化行動網頁設計基礎入門班 DAY 4

講師：張凱迪（KD.Chang）

提醒您鍵盤左右鍵可以移動投影片

Sorry, PPT is not suitable for Hackers : (

Outline

CSS3 回顧

Media Query

Transition / Transform

Animation

Multiple Columns

關於CSS3的那些小事

css3 回顧

Media Query

media queries的功用是在偵測device的尺寸和方向，並指定給予相對應的CSS檔。使用情境粗分為兩種，一種是用於mobile compatible的網頁，也就是桌機版與行動版共用一份html文件，但要套用不同的CSS檔案；另一種是做行動版專用網頁，但想要依照不同的行動裝置給予適當的CSS排版

參考文件：Media Queries

MEDIA QUERY 用法

HTML 用法<link rel="stylesheet" media="screen and (min-width: 360px) and (max-width: 720px)" href="sample.css" /> 
CSS 用法@media screen and (min-width: 360px) and (max-width: 720px) {       .selector1{...}   .selector2{...} }