[筆記] 網頁切版直播班 2020 春季班 – 第三週

本週主要講究響應式(RWD)網頁的重點,可以運用百分比、CSS、media 等等設定來確保不同螢幕大小,都有良好的使用體驗。
hex-school-logo

第三週課程重點

基礎知識

  • 網頁要在 <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;

Global Border-box

減少你計算 pixel 的麻煩。不過若有使用到 :before, :after,要一併在一開始的時候就加進去。


切版練習結果


相關文章

按讚加入粉絲團

延伸閱讀