RWD 網頁設計教學：從零開始打造響應式網站
關於 RWD 製作與注意事項
製作RWD網站一定要先知道HTML的[mate name=“viewport”]
<meta name="viewport" content="width=device-width,initial-scale=1" />
有了這個才能使網站照著框架進行縮放
接下來介紹CSS用來偵測框架來更改樣式就必須用的 @media
html @media (max-width: 768px)
這樣搭配著使用
See the Pen articles_RWD_Design-Ex.1 by wenetCodePen (@wenetcodepen
) on CodePen.
區塊變化範例一 - CodePen
拖曳視窗來改變視窗寬度，來觀看區塊的顏色變化
使用起來其實很簡單
一下子就能自適應許多不同的螢幕寬度
唯一需要注意的事情就是排版的問題
很多時候使用大螢幕看到版面為兩組一排或是三組一排
但在手機裡兩組一排會導致畫面太擁擠，或是物件過小
See the Pen articles_RWD_Design-Ex.2 by wenetCodePen (@wenetcodepen
) on CodePen.
區塊變化範例二 - CodePen
拖曳視窗來改變視窗寬度，來觀看區塊的排版變化
一個簡單的變化就能讓使用者看的時候一目了然，但怎樣的排版就是考驗設計者實力了