方法一:在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" />
小建议:为适应所有移动端,建议采用百分比的方式设定值。