css – SUSY2 – 教學範例 – 進階佈局

這篇繼承上一篇文章

主要示範整理後的SUSY布局,說明都打在裡面囉!

把後面多個SCSS合併為一個後的即時預覽

Play with this gist on SassMeister.

以下為原始範例。

index.html

 _grids2.scss

 _custom_mixin.scss

 style2.scss

最後,需要開始了解各種mixin了,所以請繼續閱讀這篇文章

如果要用 jQuery 判別當前使用的是哪種顯示裝置,可以參考這篇

對於 $susy 地圖的設定有不了解的,可以參考這篇

Comments

  1. 版大您好,有些問題想請教您
    您的斷點的設定如何制定 @media screen and (min-width:) and (max-width: ) 和 @media (max-width: ) 的範圍 ,謝謝

    • 建議直接忘掉 @media screen and (min-width:) and (max-width: ) 這種難懂的設計唷!
      改採 SUSY 的原理會自動幫你轉換成 CSS。以我這邊建議範例來說的話

      @include _break(“mobile”)
      {
      //0~639px 之間
      }

      //當發生在平板時
      @include _break(“pad”)
      {
      //640~1279px
      }

      //桌電時…
      @include _break(“desktop”)
      {
      //1280~無限
      }

      這樣你的CSS設計是不是清晰許多了呢?哪個裝置的CSS要放在哪,是不是很好懂?

      基本上我這裡不討論CSS 的 @media ,如果需要了解使用原理可以搜尋其他網友的介紹唷!

      但是誠心建議,了解 @media 即可。不建議直接實作,之前經驗是 CSS 肯定會非常凌亂喔

  2. 謝謝版大的解說~~

發表迴響