跟著KP用21天征服Responsive Layout-Day1-使用 percentages & 避免使用height

在第一天，KP分享了Responsive Layout的兩個原則與一個心法。

第一個原則是:[元素的width要使用百分比(Percentages )，而不是固定的pixel ]。

元素(dispaly的值是block)的width預設是100%，所以會占滿整行的寬度。

如果將元素的width設成固定的,如500px。那麼不論螢幕大小，這個元素的寬度都是500px，無法伸縮。如果銀幕小於500px,則元素會超過銀幕，而出現滾動條(scroller)。

這時候，只要將元素的width設成百分比，例如:80%。這麼一來，不論銀幕的大小，元素的width就都都是銀幕的80%。

如果是元素的width設百分比，是相較於銀幕。如果元素中的子元素的width設百分比，那是相較於元素的width。

桌機舉個例子，例入現在的width是1400px。現在有個元素的width是50%，元素中有個子元素的width也是50%。

元素的width: 1400*50% =700px

子元素width: 700*50% =350px

第二個原則是:[在一般的狀況下，元素不要設height]。

元素的height預設是auto，也就是會跟著元素的內容(如 文字、圖片等有高度的元素)伸縮。

如果這時候，我們對元素的height設了固定的值(如:500px)。那麼當內容的height大於500px,內容就會超出元素。

元素的height跟著內容物伸縮，就是最自然的設計了。

心法:[網頁上的元素原本都是responsive的，是因為我們對他們做了什麼，才讓他們變成不是responsive]

從以上width的預設是100%,height的預設是auto。就能看出元素的屬性預設都是responsive。

這心法真的太有禪意了，揭示了responsive設計的精神-無為而治，也許responsive設計就是要讓元素都回歸自性吧(Holy 媽祖哩)