今天要談實際用CSS調整實現RWD製作。再開始聊RWD製作前，可以先回去複習前面這兩部分，有很大的關聯～
Day13-16. 切版前知識-CSS
Day17-18. 切版前知識-RWD

Head標籤 前置作業

在開始編寫CSS前有個很重要的前置作業，就是必須在HTML中Head標籤中加入以下語法。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<!--代表螢幕寬度等於裝置寬度，且預設縮放比例為100%，可縮放-->

有加入此語法CSS的各斷點樣式才能運作正常喔！

CSS @media

前幾天有說到我切版會從網頁大版開始切，完成大版製作後，會依序由大到小看不同寬度情況下呈現的畫面，RWD設計就是在CSS中使用@media將各寬度尺寸要調整的樣式包在其中：

max-width: ＿＿＿尺寸=> 表示在此尺寸寬度以下，以此樣式顯示。

@media(max-width: 767px) {
    background:#fff;
}

min-width: ＿＿＿尺寸=> 表示在此尺寸寬度以上，以此樣式顯示。

@media(min-width: 768px) {
    background:#fff;
}

依Day18說到的螢幕尺寸，對應過來就是這樣：

background:#fff;/*桌機: 1920 x 1080 正常情況下為桌機版 所以不用加@media*/
@media(max-width: 1366px) {} /*筆電: 1366 x 768*/
@media(max-width: 1280px) {}/*筆電: 1280 x 720*/
@media(max-width: 1024px) {}/*pad: 1024 x 768*/
@media(max-width: 767px) {}/*手機: 414 x 896 (因為768以下基本上就不是pad版，所以為了避免有沒記計算到的尺寸，我會從767就定為是手機版)*/
@media(max-width: 375px) {}/*手機: 375 x 812*/
@media(max-width: 360px) {}/*手機: 360 x 800*/

編寫習慣

• 由小寫到大：就是從小尺寸寫到大尺寸，以手機、行動裝置為主的設計會用此方法。

• 由大寫到小：就是從小尺寸寫到大尺寸，以網站為主的設計會用此方法。

因為工作經驗，大多是以網站為主，我習慣由大寫到小。
但其實依各人習慣沒有對錯，只要記得要照順序編寫，因為瀏覽器讀資料都是由上而下，所以下方的code會覆蓋上方的，若剛好一個元素在不同尺寸下有不同樣式設定，一定要注意順序！

以作品集為例

我來用作品集中專業技能的這塊來當範例：

其實這塊的RWD樣式沒有做太多改變，只有在不同尺寸下變動間距、logo大小，就能實現RWD。

雖然礙於文字說明只能盡量舉簡單的例子，但RWD可以做很多變化，相信多練習一定能越來越上手的！！
除了bootstrap基本帶有的元件設定，網路上有很多好用的套件，明天就輕鬆一點，來推薦一些我常用的JS套件吧！