神奇的 @media
在 style 的 css 設定裡面，可以使用 @media 功能指定要做響應式設計的方法，
至於什麼是 css，請 google，教學很多，至於什麼是響應式(Response Design)，
簡單來說就是針對不同的瀏覽畫面 (通常是因為載具不同)，畫面自動做響應，切換到合適的
設計版面。
參考網址：http://learnwebcode.com/responsive-web-design-tutorial/
至於怎用寫 css 的 @media
撰寫方式:
@media, 要設定的條件類型，設定值
@media screen and (max-width: 900px) {
body {
color: red;
}
}
以上 css 樣式指令為：當瀏覽畫面 < 900px 時，套用其中的 css 樣式設定。
這邊推薦一個中文網站，寫的詳細又不錯
小雕雕的家 -Responsive Web Design (RWD) 響應式網站開發教學與心得
另外還有一個設定方式
<!-- css -->
<link rel="stylesheet" href="css/main.css" media="screen and (max-width: 900px)" ></link>
當滿足 media 條件時，此 link 的 css 樣式才會被套用。
思考時間：為何有的 @media 內，針對 css 類別名稱要另外定義，不直接覆寫原有的類別呢?
原因一：方便好管理，一眼就可以看出是針對某種裝置做的設定
原因二：因為 css 內容樣式已經跟類別名稱定義不符，導致樣式類別名稱會看起來很奇怪。
另外可以在 html <head> 增加以下 <meta> 標籤，告訴 browser 要支援手機樣式
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
關於針對觸控小螢幕的 css 樣式設定注意事項：
1. 不能使用 :hover，像這類的滑鼠事件，在平板or手機上是做不到的，最常見的就是 nav 導覽，滑鼠移過去就會跳出小項目，這樣的做法在觸控螢幕要改為 .click 事件
2. 可操作元素大小不可 < 0.3 公分，否則會很難觸控操作。
沒有留言:
張貼留言