關於HTML頁面自適應的CSS樣式用法

方法一：在css中使用@media

@charset "utf-8";
/*在頁面寬度小於800時，頁面顯示紅色*/
@media(max-width : 800px) {
	body{
		background: red;
	}
}
/*頁面寬度大於800、小於1200時，顯示綠色背景*/
@media (min-width : 800px) and (max-width : 1200px) {
	body{
		background: green;
	}
}
/*頁面大於1200px時顯示cadetblue顏色背景*/
@media (min-width : 1200px) {
	body{
		background: cadetblue;
	}
}

二、在link標籤中使用media

<link media="only screen and (max-width: 800px)" rel="stylesheet" type="text/css" href="css/index.css" />

小建議：爲適應所有移動端，建議採用百分比的方式設定值。