手刻RWD製法(教學課程補遺)


#1

A…好唄,anyway 因為這兩週教學我忘記說了一個東西,乾脆把這篇整篇寫出來好了 X"DD

首先,RWD = Responsive Web Design,簡單的來說就是『自適應網頁設計』…大概就是設計一個網頁可以適應所有的大小

開發前準備工作

  1. 需要這段寫在 <head> 的 tag (教學遺漏的部分)
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    也就是使用裝置的寬度為網頁瀏覽寬度,否則手持裝置會固定在1024寬度左右

  2. 學會 CSS 的 selector ,可以去玩 CSS Diner

  3. 學會 CSS 的權值系統(打牌規則):inline-style > #id > .class > tag,多出者贏,後出者贏,還有鬼牌 !important

  4. 最後才用這個來當覆蓋的方式( min / max 可寫其中一個即可)
    @media all and (min-width: N px),(max-width: M px){ … }

  5. 看你要慢慢縮小還是慢慢放大,就一直覆蓋下去(出牌),打完一輪該頁面的RWD其實也完成了

實作順序,看你要 mobile first 或是桌上電腦為主,這兩派中心思想不一樣,對我而言我比較愛後者,也就是把最複雜的網頁做好,縮小只要慢慢隱藏掉即可

anyway 先提示與補完至此,以上