1.網頁寬度自適應，需要把網頁元素寬度設定為百分比，還要在網頁頭部加上程式碼： <meta name="viewport" content="width=device-width,initial-scale=1.0" />　
width=device-width ：寬度等於裝置螢幕的寬度
initial-scale=1.0：表示：初始的縮放比例
minimum-scale=0.5：表示：最小的縮放比例
maximum-scale=2.0：表示：最大的縮放比例
user-scalable=yes：表示：使用者是否可以調整縮放比例

2.想控制字型的大小的話，應該使用相對大小
字型也不能使用絕對大小px，而只能使用相對大小em。
body {font: normal 100% Helvetica, Arial, sans-serif;}

h1 {font-size: 1.5em; }
h1的大小是預設大小的1.5倍，即24畫素（24/16=1.5）。

small {font-size: 0.875em;}
small元素的大小是預設大小的0.875倍，即14畫素（14/16=0.875）。

3.流動佈局（fluid grid）

"流動佈局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢位），避免了水平滾動條的出現。

2.圖片自適應，且不超過原始大小，需要設定最大寬度，程式碼如下： img{  width:100%;  max-width:100%;}。