【首先在head加入】
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no” />
【添加css，也可添加在head】
<style>
/* 设置abc的初始默认属性，此设置可不要，可删除 */
.abc{ height:100%; border:1px solid #000; margin:0 auto}

/* 其他：设置浏览器宽度大于1201px时，abc显示1200px的宽度，此条也为可选项 */
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}

/* ①针对电脑显示720px：
设置浏览器宽度“大于500px并小于10000px时”，abc显示720px的宽度 */
@media screen and (max-width: 10000px) {
.abc {width: 720px}
}

/* ②针对手机显示100%：
设置浏览器宽度“小于500px时”，abc显示100%的宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100%;}
}
</style>

注：从下往上的顺序依次判断，如果下面不满足再判断上一条。如果先满足了最下面的手机这个，就会显示最下面的手机这个（虽然手机同时满足了小于10000px和小于500px，但它会显示下面这个）

另注：且越在上面的，设置的要比下面的大，否则判断会紊乱失效导致只显示下面的。因为第一次判断已经满足下面的了(所以一直显示下面的)，而如果上面的比下面的大，下面的如果不满足，才会判断上面的。
【调入页面】
<div class=”abc”>
网页内容
</div>