動民主 2.0 responsive plan（過期文件不用看 XD）
編輯歷史
| 時間 | 作者 | 版本 |
|---|---|---|
| 2013-12-18 14:46 – 14:46 | r581 – r586 | |
顯示 diff- 動民主 2.0 responsive plan
+ 動民主 2.0 responsive plan（過期文件不用看 XD）
*純幻想，實做時請依臨床狀況調整 XD
（37 行未修改）
|
||
| 2013-09-12 05:52 – 06:24 | r313 – r580 | |
顯示 diff 動民主 2.0 responsive plan
+ *純幻想，實做時請依臨床狀況調整 XD
- vertical rhythm
- *html body font size 預設 16px
- *nav bar、menu bar... 等橫向區塊的垂直高度：3rem
- *橫向區塊包含多行時，行高：2rem，區塊上下 padding：1rem
- *level 1 大 icon：2rem x 2rem（為了符合 android ics design guideline 的 32 x 32 px）
- *
+
+ 尺寸變化
+ plans for vertical rhythm
+ *之前在綠盟呼叫立委跟動民主 1.0 用過的，應該是可以實做，至於 horizontal grid 就沒概念了... 因為我沒寫過水平多欄的網頁 XDDD
+ *html body font size 預設 16px，使用 rem 當度量單位
+ *nav bar、menu bar... 等橫向長條區塊的垂直高度：3rem（符合 android ics design guideline 的 48 px）
+ *橫向長條區塊包含多行時，行高：2 rem，區塊上下邊緣與文字的距離：1 rem
+ *level 1 大 icon：感應區 2 rem x 2 rem，視覺大小高 1.5 rem（符合 android ics design guideline 的 24 px 和 32 px）
mobile (portrait) max-width: 480px
mobile (landscape) max-width: 640px
+ *一般字級 1 rem（16px）
tablet (portrait) max-width: 768px
tablet (landscape) max-width: 1024px
+ *一般字級 1.125 rem（18px）（老花 friendly）
desktop medium max-width: 1440px
+ *html body font size：18px 之類的，所有元素整體放大（老花 friendly）
desktop large min-width: 1440px
- *html body font size 預設 16px
+ *html body font size：2px
+ 之類的，所有元素整體放大（老花 friendly）
+
+
+ 形狀變化
+
+ level 1 nav bar 由寬變窄時的行為
+ *第一次卡到時：水平選單變成垂直 spinner，網站名稱剩下 logo（類似標準 android ics main menu）
+ *第二次卡到時：搜尋框剩下 icon，要按一下 icon 才出現搜尋框
+ *第三次卡到時：使用者名稱隱藏，剩下頭像
+
+ 「問答」level 2 nav bar 由寬變窄時的行為
+ *第一次卡到時：水平選單變成垂直 spinner，網站名稱剩下 logo（類似標準 android ics main menu）
+ *第二次卡到時：左右邊界和頁緣的距離變成 0（原本大概有 2 rem 左右）
+ *理論上應該不會再卡到第三次才對... XD
|
||
| 2013-09-12 05:52 | r312 | |
顯示 diff（20 行未修改）
|
||
| 2013-09-12 05:35 – 05:52 | r14 – r311 | |
顯示 diff 動民主 2.0 responsive plan
- xs (<768px) sm(>=768px) md(>=992px) lg(>=1200px)
+ vertical rhythm
+ *html body font size 預設 16px
+ *nav bar、menu bar... 等橫向區塊的垂直高度：3rem
+ *橫向區塊包含多行時，行高：2rem，區塊上下 padding：1rem
+ *level 1 大 icon：2rem x 2rem（為了符合 android ics design guideline 的 32 x 32 px）
+ *
+
+
+ mobile (portrait) max-width: 480px
+ mobile (landscape) max-width: 640px
+
+ tablet (portrait) max-width: 768px
+ tablet (landscape) max-width: 1024px
+
+ desktop medium max-width: 1440px
+
+ desktop large min-width: 1440px
+ *html body font size 預設 16px
|
||
| 2013-09-12 05:34 | r13 | |
顯示 diff（3 行未修改）
|
||
| 2013-09-12 05:33 – 05:34 | r1 – r12 | |
顯示 diff- Untitled
+ 動民主 2.0 responsive plan
- This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
+ xs (<768px) sm(>=768px) md(>=992px) lg(>=1200px)
|
||
| 2013-09-12 05:33 | r0 | |
顯示 diff+ Untitled
+ This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
|
||