1、寬度不要用絕對的
width:auto; / width:xx%;
2、字型大小是頁面預設大小的100%，即16畫素，不要使用絕對大小"px"，要使用相對大小「rem」
html
body
html的字型大小設定為font-size:62.5%
原因：瀏覽器預設字型大小是16px，rem與px關係為：1rem = 10px，10/16=0.625=62.5%，為了子元素相關尺寸計算方便，這樣寫最合適不過了。
3、流動布局
"流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的
.left
.right
像這樣，用左浮動和右浮動，好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢位），避免了水平滾動條的出現
4、選擇載入css
這段**的意思是：如果螢幕寬度小於600畫素（max-device-width: 600px），就載入css600.css檔案。
如果螢幕寬度在600畫素到980畫素之間，則載入css600-980.css檔案
5、自適應，"自適應網頁設計"還必須實現的自動縮放。
網頁自適應
1.文件 允許網頁寬度自動調整 網頁的原始比例即為螢幕的大小，ie9 viewport元標籤 網頁的預設寬度，width device width,是說網頁的初始寬度等於螢幕的寬度，initial scale 1,縮放比例為1倍 相容ie老版本需要支援 2.載入css css3 media quer...
網頁自適應
文章入口 自適應 使用 viewport 標籤 viewport 是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1.0，即網頁初始大小佔螢幕面積的100 使用 百分比 或 em 要變化的不宜...
網頁自適應
允許網頁寬度自動調整 自適應網頁設計 到底是怎麼做到的？其實並不難。首先，在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1.0...