1、媒体查询

媒体查询会根据设备的大小自动识别加载不同的样式，如响应式UI框架bootstrap就是通过媒体查询实现的。
语法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  6.     <title>CSS3新特性-媒体查询</title>
  8.     <style>
  9.         .box{
  10.             width: 300px;
  11.             height: 300px;
  12.         }
  13.         @media screen and (max-width: 768px) {
  14.             /* 手机设备加载的样式，要注意and和括号之间要加空格的 */
  15.             .box{
  16.                 background-color: aqua;
  17.             }
  18.         }
  19.         @media screen and (max-width: 992px) and (min-width: 768px) {
  20.             /* 平板设备加载的样式，要注意and和括号之间要加空格的 */
  21.             .box{
  22.                 background-color: blue;
  23.             }
  24.         }
  25.         @media screen and (min-width: 992px) {
  26.             /* 电脑设备加载的样式，要注意and和括号之间要加空格的 */
  27.             .box{
  28.                 background-color: rebeccapurple;
  29.             }
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  35.     <div class="box"></div>
  37. </body>
  38. </html>

2、设置meta标签

  1. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  2. width=device-width：宽度等于当前设备的宽度
  3. initial-scale：初始缩放比例,默认设置为1
  4. maximum-scale=1：允许用户缩放到的最大比例，默认设置为1
  5. user-scalable：用户是否可以手动缩放，默认设置为no