首頁 網頁資源RESOURCES CSS
RWD網頁設計教學,該如何起手?

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

2021.07.26
關於RWD製作與注意事項
製作RWD網站一定要先知道HTML的[mate name="viewport"]

                        <meta name="viewport" content="width=device-width,initial-scale=1" />
                    
有了這個才能使網站照著框架進行縮放
接下來介紹CSS用來偵測框架來更改樣式就必須用的 @media

                        @media only screen and (max-width: 768px)
                    
這樣搭配著使用

電腦版

手機版

請嘗試拉動改變視窗大小或是點擊圖像來看看效果
在製作RWD時一定要先考慮好使用者的操作方便以及閱讀清晰
注意按鈕會不會太小不好點擊、文字太小看不太到
製作完要記得使用手機再檢查一次

RWD小技巧
在製作RWD時,一定要注意不要讓物件超出畫面或者文字太小
文字
會導致使用者操作上的不便以及閱讀上的困擾,從而讓使用者離開網頁
所以盡量製作成一目了然,也能使用者操作起來方便
文字
在製作網頁時,就該先把手機版的樣式構想先決定好,才能讓自己在製作時順利
可以善用max-width來控制面板對架構寬度大小的影響

電腦版

手機版

width: 1500px;
max-width: 100%;
width: 1500px;
max-width: 80%;
width: 1500px;
max-width: 60%;
width: 1500px;
max-width: 40%;
這樣就可以避免超出視窗,還可以讓版面可讀性提高
文字的部分,除了頁尾聲明或者比較不重要的提醒文字,盡量都避免使用最小點字 12px
讓手機使用者可以更舒適瀏覽,使用14px以上的文字大小更容易閱讀

其他類別