关于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" />

小建议：为适应所有移动端，建议采用百分比的方式设定值。