本週主要講究響應式(RWD)網頁的重點,可以運用百分比、CSS、media 等等設定來確保不同螢幕大小,都有良好的使用體驗。
第三週課程重點
基礎知識
- 網頁要在 <head> 部分宣告 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
- CSS 權重不同,一般的 CSS 不需要使用到 id, !important 等權重高的選項
經驗談
網頁不可以出現 x 軸的 scroll bar
文字部分可以用 @media 來規範 div 大小
圖片部分可以在一開始宣告:max-width: 100%; height: auto;
圖片部分可以在一開始宣告:max-width: 100%; height: auto;
Global Border-box
減少你計算 pixel 的麻煩。不過若有使用到 :before, :after,要一併在一開始的時候就加進去。