great-good-loading-dog

鬼谷設計

GREAT GOOD DESIGN

RWD網頁設計教學,該如何起手?

3個月前

關於RWD製作與注意事項

製作RWD網站一定要先知道HTML的[mate name="viewport"]

<meta name="viewport" content="width=device-width,initial-scale=1" />

有了這個才能使網站照著框架進行縮放

接下來介紹CSS用來偵測框架來更改樣式就必須用的 @media

@media (max-width: 768px)

這樣搭配著使用

區塊變化範例一 - CodePen

拖曳視窗來改變視窗寬度,來觀看區塊的顏色變化

使用起來其實很簡單

一下子就能自適應許多不同的螢幕寬度

唯一需要注意的事情就是排版的問題

很多時候使用大螢幕看到版面為兩組一排或是三組一排

但在手機裡兩組一排會導致畫面太擁擠,或是物件過小

區塊變化範例二 - CodePen

拖曳視窗來改變視窗寬度,來觀看區塊的排版變化

一個簡單的變化就能讓使用者看的時候一目了然

但怎樣的排版就是考驗設計者實力了