<html>
<head>
<!-- 声明这是一张响应式的页面，让浏览器支持网页自动伸缩 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
</head>
<body></body>
</html>针对不同的屏幕尺寸，设置不同的样式效果。
/* 768 ～ 991 像素屏幕 | iPad */
@media (min-width: 768px) and (max-width: 991px) {
* {background: red}
}
/* 480 ～ 767 像素屏幕 | 普通手机 */
@media (min-width: 480px) and (max-width: 767px) {
* {background: green}
}
/* 480 像素屏幕 | 小屏设备 */
@media (max-width: 479px) {
* {background: blue}
}