Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Vertical rhythm

4.130 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Vertical rhythm

  1. 1. 高雄前端社群#9 前端圖形再進化! WIFI:NSYSU-Guest 密碼:12345678
  2. 2. Welcome
  3. 3. • 前端工程師/5y • 熱愛HTML & CSS • 2013年創辦高雄前端 廖洧杰
  4. 4. 圖文排版最佳化 (vertical_rhythm)
  5. 5. 該如何排出友善的圖文排版?
  6. 6. 使用垂直韻律(Vertical Rhythm)
  7. 7. 不符合固定比例的間距難以閱讀 http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
  8. 8. 所以在網頁排版上也要有這個觀念 http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
  9. 9. 除文字外,所有元素也可依照此規則
  10. 10. 那麼該如何用CSS來實踐垂直韻律?
  11. 11. 首先必須先瞭解行距(Line-height)
  12. 12. 文字高度來自『行距』,非文字大小 • http://codepen.io/liao/pen/EmIat http://www.pearsonified.com/2011/12/golden-ratio-typography.php
  13. 13. 先確認你網頁的行距(24px),確認 好等同於在網頁上畫上行線 24px 24px 24px
  14. 14. 段落設定行距24px,文字大小16px, 文字就會垂直置中於行距 4px 4px 16px
  15. 15. 有些網站服務也可以看其效果 • http://drewish.com/tools/vertical-rhythm/
  16. 16. 當標題文字大於24px以上時,行距可 設定為兩行 44px24px+24px=48p x
  17. 17. 使用文繞圖時,圖片寬高也需整除 高度= 24px(行距) * 4 = 96px 寬度= 16px(字距) * 10 =160px 44px
  18. 18. 要不規則也是ok的,只要確保 有遵守垂直韻律即可 http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
  19. 19. 純CSS設計方式 • http://codepen.io/liao/pen/pHyhg Sass+Compass設計方式 • http://codepen.io/liao/pen/DouJz/
  20. 20. 問題
  21. 21. • A. 行距 (line-height) • B. 狀態 (:hover、:active) • C. 背景圖案 (background) • D.字型大小 (font-size) 1.如果要使用垂直韻律,在文字上 哪些是一定要設定的?(複選)
  22. 22. 2.如果網頁行距設定24px,在設計文 繞圖時,哪張圖片較麻煩?(寬*高)
  23. 23. 3.如果網頁行距設定24px,當文字大 小為38px的時候,需要幾行空間?
  24. 24. 總結
  25. 25. 總結 • 設計網頁時,先構想好基本行距要設定多少, 常見預設行距為24px。 24px
  26. 26. 總結 • 並不是說所有元素都必須統一使用垂直韻律, 你可以只侷限部分元素使用。例如:文章內 容區塊。
  27. 27. • 如果行距為24px,使用到垂直韻律的區塊, 元素記得要以24px的倍數來設計。 高度= 24px(行距) * 4 = 96px 寬度= 16px(字距) * 10 =160px 總結

×