将桌面浏览器窗口缩小到很窄，可以让你对响应式设计的工作原理有一个模糊的认识，但它并不能准确地反映实际的小屏幕设备。而我们在这里的设计目标是针对实际的小屏幕设备，而不是其他好奇的设计师缩小他们的浏览器窗口 =)。
在这个屏幕录制中，我们打开 iOS 模拟器（随 Mac 上的 XCode 免费提供），并根据我们在那里看到的内容进行了一些设计调整。根据我的经验，模拟器与你在真实设备上看到的效果非常一致。不过我也看到过一些差异，例如内存使用情况。就在这个网站发布之后，我发现 移动版 webkit 崩溃，而这在模拟器中却没有发生。
我们做的一件事是在最窄的媒体查询中删除了 3D 堆叠纸张效果。我们还发现，标题中的广告会导致移动设备出现水平滚动，这在我们对移动布局的处理方式中是不可取的。幸运的是，我们能够立即追踪到这个问题，但有时这些问题很难追踪到，你只能隐藏主体上的 overflow-x，而我们最终在这里就是这样做的。
我们还针对较小的屏幕调整了一些字体大小。
也许你在后面的视频中会提到，但可能是浏览器兼容性差异吗？
iOS 模拟器是 Safari。我知道 Chrome 和 Safari 非常接近，但我不确定 Chrome 和移动版 Safari 之间是否存在任何差异。
我发现一些工具对 Windows 机器上的 RWD 很有用（我与这些工具没有关联，它们只是很棒，并且也适用于 Mac）。
1. Chrome 扩展名为 Window Resizer，它允许你为浏览器设置特定的屏幕分辨率（感谢 Treehouse 提供这个工具）。
2. Adobe Edge Inspect（以前称为 Adobe Shadow）。它会基本上将你的浏览器窗口内容镜像到移动设备上。
我在之前的屏幕录制中提到了这一点，但对于 Windows，我使用的是这个，我认为它是最好的。 Ripple emulator
你认为先为移动设备创建网站，然后在向平板电脑和桌面端添加更多内容，这种方式怎么样？我听说人们谈论先为移动设备进行设计，因为你首先关注内容。其他人有这样做吗？Chris 是否应该先从这里开始做？
顺便说一句，我非常喜欢这些视频。学到了很多东西，我也发现自言自语是正常的，因为我在开发网站时也会这样做。
我认为这是一个很好的方法，尤其适用于网页应用。它迫使你进行裁剪和简化，仅仅因为屏幕空间有限。对于那些无法裁剪某些东西的应用来说，这是一个大问题，因为这些东西对应用的核心功能至关重要。
对于网页网站来说，问题没那么严重。仍然需要简化，但你不必裁剪太多。目标主要是可读性和可导航性，这些问题比拖放式表单构建器更容易解决。
移动优先改变了你的优先级。对于像 CSS-tricks 这样的网站来说，移动优先可能不那么重要，因为大多数使用这个网站的人都是坐在电脑前的开发者，而不是在 iPhone 上进行开发（测试，是的……开发，我怀疑），但我相信 Chris 在为桌面端进行设计时仍然考虑到了移动设备。
我倾向于不同意作为一般性陈述，它对网页网站来说不那么重要。它仍然取决于网站的受众和内容。如果你已经拥有一个网站，Google Analytics 是获取此类信息的金矿。
许多人使用手机作为主要计算设备。还有那些使用平板电脑和超大手机作为主要设备的人！
这取决于你的内容和受众，但我可能会考虑将大约 600 像素的宽度作为主要宽度进行设计。更宽的版本（桌面端）和移动版本可以从该宽度进行响应。如果你有 iPad，请查看
…哦，查看你在 iPad 上的 http://niarchive.org/trails/causeway-coast-salmon/。我喜欢他们如何将窄布局过渡到本质上的“阅读模式”。