[CSS] 浮動與清除浮動

由於老師耳提面命，float排版以及了解清除浮動的時機是網頁layout的基石之一，所以決定來彙整一下相關的資料，剛好某種程度上也可以承接上一篇的主題。

[RWD] 響應式網頁設計 2

語法筆記：多欄多列選單及漢堡選單

本篇文章將記錄 RWD 的常用選單語法結構，包含多行多列選單及漢堡選單等兩種。

一、多欄多列選單排版法：以 3 * 2 為例

HTML：ul li 結構，li 需要 6 個

CSS：

float: right;  //PC版排版
media query…

[RWD] 響應式網頁設計 3

語法筆記：固定式選單及 off-canvas 選單

本篇文章將承接上一篇文章繼續記錄 RWD 的常用選單語法結構，包含固定式選單及側邊展開（off-canvas）選單等兩種。

三、固定式選單

讓使用者在滑動頁面時，表頭永遠在螢幕上方。

[解題][CSS] 跑版是因為沒有清除浮動，還是因為沒搞清楚元素特性？

昨天在六角學院社團看到有人發問排版問題，因為是我第一次試著替別人debug因此特別想記錄下來，順便當作我使用Medium紀錄前端學習之…

[SASS] SASS 基礎概念 2

延續上一篇的主題，本篇將整理稍微進階一些、但更接近實務的相關應用，包含如何使用 SASS 來提升響應式設計的開發效率。

化簡知識庫：@mixin 設定常用語法，@include召喚出來

這個語法可以省去一直回想原理跟技巧的時間。

基本用法：複製

[SASS] SASS 基礎概念 1

什麼是 SASS？

SASS 是一種針對 CSS 的腳本程式語言，藉由提供程式語言的特性，例如變數、巢狀結構、混合、函式與擴充（繼承）等等，可以預先對 CSS 進行結構化的工作，最後再編譯可使用於網頁上的 CSS 語法。需要搭配 SASS 直譯器(如prepros)進行撰寫。

SASS 包括兩套語法。最開始的語法叫做「縮排語法」，使用縮排來區分程式碼塊，並且用換行將不同規則分隔開，附檔名為 .sass。而較新的語法叫做「SCSS」，使用和 CSS…

[RWD] 響應式網頁設計 1

RWD 常用選單樣式與注意事項

常用選單樣式與注意事項

在學習響應式網頁設計（Responsive Web Design）的路上，想記錄一些學習過程跟基礎語法，本篇筆記將從 RWD 常用選單的樣式及實作時的注意事項開始這個系列的旅程。

常用樣式

[RWD] 響應式網頁設計 4

實作常見問題與錯誤

一、確認 media query 斷點

先抓熱門的螢幕解析度，例如 max-width: 768 px (平板) 及 569 px (iPhone 5 橫式)，在這兩個解析度之間會有一個斷層，可能在 600 多 px 時版面會變得比較難看，此時就為這一段斷層加條件：

@media(max-width: 767px) and (min-width: 569 px){}