480px以下，480px-640px,640px-1024px,1024px以上
static:靜止的，不變的,not change or move
adaptive:能適應的， having the ability or tendency(常發生的行為，傾向) to adapt to different situations.
liquid:像液體一樣流動的，非固定形狀和排列的
responsive:迅速積極反應的, quick and favourable(有利的) to react
layout:the way in which the parts are arranged(安排，排列)
靜態布局：元素不變的布局。
布局特點：
窗口縮小后內容被遮擋時，拖動滾動條顯示布局
設計方法：
PC：居中布局，所有樣式使用絕對寬度，高度
移動設備：另外建立移動網站，以m.域名為域名
自適應布局：創建多個靜態布局，每個靜態布局對應一個屏幕分辨率范圍
布局特點：
改變屏幕分辨率可以切換不同的靜態局部，在每個靜態布局中，元素不發生變化，相當於靜態布局的一個系列
設計方法：
使用媒體查詢功能
流體式布局：元素寬度按照分辨率寬度進行長度、寬度的調整，但布局不變
缺點：
如果屏幕尺度跨度過大，那么在相對原始設計而言過小或過大的屏幕上不能正常顯示
響應式布局：創建多個流體式布局，分別對應一個屏幕分辨率范圍
特點：
分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨着窗口調整而自動適配
創建多個元素寬度是相對的的布局
理想的響應式布局是指的對PC/移動各種終端進行響應的
響應式布局基本樣式
使用 respond.js解決IE6-IE8不支持CSS3的問題：<script src="respond.min.js">或者</script><script src="respond.src.js"></script>
先寫相同的大框架，部件等 html,body{ } 下面寫不同的布局 @media only screen and (min-width:480px) and (max-width:640px){ body{ background:yellow; } } @media only screen and (min-width:640px) and (max-width:1024px){ body{ background:blue; } } @media only screen and (min-width:1024px){ body{ background:blue; } }
tumblr和qq空間:
tumblr分別為pc端和手機端制定了兩套布局
監測客戶端而不是分辨率，不同的客戶端使用不同的一套布局
pc:<body>流體，其中的元素都是靜態的
手機：相對屏幕寬度設定，布局不變，是流體式設計