響應式網站製作重點

不要產生X軸

RWD網站的大忌，就是產生X軸。
X軸指的是，有將網頁固定寬度，所以當瀏覽器縮小時，就產生了左有一棟的軸。為了避免X軸，外層的容器從width改用max-width，內層從px改用%。

max-width 語法

max-width 和 width的不同?
假如設定 max-width:1200px;
若今天父元素較小，max-width會自適應縮小，不會產生X軸。

img運用max-width

img{
max-width: 100%; 
height: auto;
}
//不會超過原始圖片的寬度，當螢幕解析度縮放時，圖片可以自適應縮放，而不失真。
//會把它加入reset內

認識 box-sizing

*,*:before,*:after{
box-sizing: border-box
} 
//不用再特別計算padding

% 的使用

父層寫max-width寬度
內層用width: %，左右加起來不超過100%，就不會產生X軸。
使用 %，會依照父層自適應縮小延伸。