一祖今，允許網(wǎng)頁寬度自動調(diào)整：
在網(wǎng)頁代碼的頭部，加入一行viewport元素標簽
<meta name="viewport" content="width=device-width,initial-scale=1 /">
viewport是網(wǎng)頁默認的寬度和高度讳苦，上面這行代碼的意思是锉走，網(wǎng)頁寬度默認等于屏幕寬度（width=device-width）,原始縮放比例（initial-scale=1）為1，即網(wǎng)頁初始化大小占屏幕面積的百分之百术徊。
二本刽，不使用絕對寬度
由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局赠涮，也不能使用具有絕對寬度的元素
具體說子寓，CSS代碼不能指定像素寬度：width:xxx px;只能指定百分比寬度：width:xx%;或者：width:auto;這里開發(fā)是指一個網(wǎng)頁不僅能用在ps上洪灯，也能同時用于移動端冠句，但是對于webapp這種還是需要單獨左一個webapp使用頁面
三，相對大小的字體
字體也不能使用絕對大兄欢场（px）株憾，而只能使用相對大序（em）
body{font:normal 100% Helvetica,Arial,sans-serif;}
上面的代碼指定晒衩，字體大小是頁面默認大小的100%，即16像素
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）
四：流動布局（fluid grid）
“流動布局”的含義是，各個區(qū)塊的位置都是浮動的虹菲，不是固定不變的
.main{float:right;width:70%;};
.leftBar{float:left;width:25%;};
float的好處是靠胜，如果寬度太小，放不下兩個元素毕源，后面的元素會自動滾動到前面元素的下方浪漠，不會在水平方向overflow（溢出），避免了水平滾動條的出現(xiàn)霎褐。另外址愿，絕對定位（position:absolute）的使用，要小心
五冻璃，“自適應網(wǎng)頁設(shè)計”的核心
就是CSS3引入的Media Query模塊响谓，它的意思是，自動探測屏幕寬度省艳，然后加載相應的CSS文件
<link rel="stylesheet" type="text/css" media="screen and (max-device-width:400px)" href="tinyScreen.css" />
上面的代碼的意思是娘纷，如果屏幕寬度小于400像素（max-device-width:400px）,就是加載tinyScreen.css文件
<link rel="stylesheet" type="text/css" media="screen and (min-width:400px) and (max-device-width:400px)" href="smallScreen.css" />
如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件跋炕。 除了用html標簽加載CSS文件赖晶，還可以在現(xiàn)有CSS文件中加載。
@import url("tinyScreen.css") screen and (max-device-width:400px);
六辐烂，CSS的@media規(guī)則
同一個CSS文件中遏插，也可以根據(jù)不同的屏幕分辨率，選擇應用不同的CSS規(guī)則
@media screen and (max-device-width:400px){
.column { float: none; width:auto; } #sidebar { display:none; }
}
上面的代碼意思是棉圈，如果屏幕寬度小于400像素，則column塊取消浮動（float:none）,寬度自動調(diào)節(jié)（width:auto）,sidebar塊不顯示（display:none）.
七眷蜓，圖片的自適應（fluid imgae）
除了布局和文本分瘾，“自適應網(wǎng)頁設(shè)計”還必須實現(xiàn)圖片的自動調(diào)節(jié)
只要一行CSS代碼即可：
img {max-width:100%}
這行代碼對大多數(shù)嵌入網(wǎng)頁的視頻有效，也可以寫成：
img, object {max-width:100%}
而老版本的IE不支持max-width
所以只能寫成
img {width:100%;}
