响应式设计

遵循移动网络开发的原则， 我们从一个很窄的viewport — 跟手机很相似 — 我们先从手机开始。 然后再一步一步的扩展到更大的设备。 我们可以逐步扩大viewport同时决定设计和布局是否合适来实现。

刚刚我们为我们的内容制作了两个高水准的设计。现在我们要让我们的页面去适应不同的布局。 我们通过放置断点—决定结构以及样式—断点的位置取决于内容如何适应窗口大小。可参考：http://wf.uisdc.com/cn/getting-started/your-first-multi-screen-site/responsive.html#

关键要点

始终使用一个视窗。

始终从一个窄的视窗开始，然后扩展。

当你需要调整内容时请基于你的断点。

利用主要断点创建一个高级的布局视图。

就算是一个非常基础的页面，你必须一直包括一个视窗viewport meta标签。 在建立跨设备体验的过程当中，视窗是最重要的一部分。 没有它，你的站点不会在一个移动设备上正常运转。

视窗决定设备浏览器如何决定窗口是否需要适应网页。有很多设置都可以通过指定视窗来调控页面如何显示。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

视窗的配置只会出现在head标签当中，并且只需要声明一次。