关键要点

• 使用meta标签viewport来控制浏览器的“视口viewport。
• 使用元视口值 width=device-width 控制页面适应不同分辨率的屏幕宽度。无论是手机的小屏幕或桌面显示器，页面将会根据不同的屏幕尺寸重新对内容进行排版。
• 些浏览器在用户旋转为横向浏览的时候仅仅是保持页面宽度不变并缩放网页内容而不是对屏幕内容进行重新排版。加入属性initial-scale=1使页面无论在什么情况下都将CSS像素与屏幕像素的比例保持在1:1，并允许页面优先采用全尺寸屏幕宽度
• 确保用户能够自我调节视窗大小
• 注意：使用逗号","来区分属性，并能保证老版本浏览器可以合理的解析这些属性
• 即：

• 确保viewport可用

  除了设置 initial-scale 以外，你也可以对视口进行 minimum-scale, maximum-scale 和 user-scalable 等属性设置。当设置完成之后，这些属性能够禁止用户缩放视口，从而可能导致网站的可访问性问题。

• 设置一个较大的绝对宽度的CSS页面元素（如下所示）将会导致 div 在窄屏设备视口中显得太宽（例如一台CSS像素宽度为320的iPhone）这种情况下可以使用相对宽度值，例如 width: 100%。
• 同样的，使用较大的绝对定位值可能会导致页面元素落在窄屏设备的显示范围之外，在进行移动站点开发时一定要注意这一点。
• 第二种：

  用 CSS media queries （设备查询） 来实现响应式

• 关键要点

  • media queries可以根据不同设备的特性来应用不同的样式。
  • 尽可能使用 min-width 代替 min-device-width 来保证最宽广的体验。
  • 使用相对大小数值来设定元素大小，以防打乱布局。