概述

網頁技術因應各種不同的裝置，演進出響應式網頁 (Responsive Web Design ，RWD) 的概念，即相同介面可配合不同解析度，但仍然維持網頁好看、易讀的技術。 本單元將介紹 Figma 好用的 「Constraints」(約束)功能，可設計類似於搭配 RWD ，來更適配於不同解析度的裝置介面。

重點學習技巧

• 技巧ㄧ：了解響應式網頁 (Responsive Web Design)

• 技巧二：了解 Constraints（約束）特性

• 技巧三：了解 Horizontal Constraints 水平約束功能

• 技巧四：了解 Vertical Constraints 垂直約束功能

• 技巧五：物件的 Constraints 的階層關係

• 技巧六：善用 Layout Grid 排版網格

• 技巧七：Layout Grid - 網格

• 技巧八：Layout Grid - Columns 與 Rows 網格

• 技巧九：Layout Grid 與 Constraints 的交互作用

• 技巧十：透過 Figma Mirror 檢視手機版介面

實作ㄧ：練習 Horizontal/Vertical constraints 

實作二：Layout Grid 與 Constraints 搭配練習

實作三：首頁響應式設計

實作四：Header 響應式設計(漢堡選單)

實作五 ：固定選單（Fix position ）並從手機預覽