Responsive Web Design-響應式選單設計tips

一些在響應式設計選單上要注意的點

• 現今手機最小最大公約數為320px，一般來說都會兼容320px。

• 一般字大小16px，320px可以放20個字，但扣掉左右間距，大概是12~16個字左右。

• 螢幕往下滑，選單依舊在瀏覽器最上方出現，手機通常會出現此設計，寫法為在@media裡寫  .header { position:fixed; width:100% ; background-color: ;}要注意 background-color設定，從上往下拉視覺搭配性。 因為header裡的menu被固定住了，所以下面content內容會被遮住，所以在@media裡寫，  .content { padding-top: Xpx; } Xpx=大於等於menu高度。

• 選單類別很多通常會用off canvasvas選單。

【常見選單類型壹】手機瀏覽後變成2 x N 或是3 x N

• 避免除不盡的選項，比如5個選單不管是 x N 或是3 x N，最後一行都會缺一個按鈕。

全螢幕瀏覽：

手機瀏覽：

..............................................................................................................................................................

【一列式選單】螢幕縮小後還是維持一列式選單

全螢幕瀏覽：

手機瀏覽：

....................................................................................................................................

【漢堡式選單】右上角menu點開，跳出單欄式一個階層選單

全螢幕瀏覽：

手機瀏覽：

   

...................................................................................................................................

【off canvasvas選單】從側邊跳出來選單，在全螢幕和手機瀏覽排版方式類似.

也有另外一種是要手機瀏覽狀態，左側選單才會跳出來，如下一則示範

全螢幕瀏覽：

手機瀏覽：

 

【off canvasvas選單2】手機瀏覽狀態選單才會跳出來

螢幕瀏覽

手機瀏覽