Question

我目前正在设计一个带有wordpress的投资组合网站。这个想法是它将在一个页面中，并使用js向上和向下滚动。

在对整个物体进行固定宽度编码后，我想到了响应式设计。我开始阅读，我想我有了主意。在做任何其他事情之前，我将回到photoshop并重新编辑移动设计 - 快速查看我想要的移动设备（几乎是移动设备，至少在Photoshop上，有点忽略我已有的设备）

在我目前的设计中，我以幻灯片形式显示我的工作示例。我正在使用此插件http://css-tricks.com/3412-anythingslider-jquery-plugin/。我的第一直觉是移动时删除这些幻灯片，每个工作只使用一个图像。这是个好主意吗？

我还看到了一些响应式设计教程，它们为所有分辨率使用相同的图像，然后用css缩小它们。我应该为移动设备使用不同（大小）的图像吗？例如

@media screen and (max-device-width: 480px) {
  .img {
    background:url(site-small.jpg)
  }
}
@media screen and (max-device-width: 600px) {
  .img {
    background:url(site-large.jpg)
  }
}

正如我所说，我的投资组合网站都在一个页面中，我使用jquery ScrollTo（）功能来实现导航http://two24studios.com/的这种效果。对于移动版，我应该删除它吗？

我有一些看似令人印象深刻的装饰性图像，并且在交互中增加了很多，如果我在屏幕变小时删除它们会更好。在这个笔记上（虽然我还没有调查）如果我在小屏幕上删除一些内容，我是否只使用display：none或者是否有办法防止内容无缘无故地加载。< / p>

我使用一种嵌入式字体进行设计，是否可以保留移动版本，或者是否有任何限制，例如移动浏览器是否支持@ font-face嵌入。

最后，我正计划在wordpress中创建一个新页面，并将其称为“playground”，其中包含html5，CSS3之类的演示列表以展示我的技能。我应该在移动版本中包含它吗？我认为移动用户无法真正利用它？

我希望你能帮助我解决我所拥有的任何不确定因素

Answer 1

移动用户的带宽更有限，连接速度更慢。在考虑加载页面的速度时，您需要牢记这一点，因为这会极大地影响用户体验。

我会避免使用幻灯片显示移动设备 - 或者至少使用适合屏幕尺寸的较小图片进行幻灯片放映。例如，当你在360px宽屏幕上时，你不需要下载宽度为720px的图像。

滚动到可能会正常工作。您可能想要考虑的一个问题是，如果您使用JavaScript作为“scrollTo”功能，则使用触摸事件而不是单击事件。（A presentation on touch events。）

至于你的游乐场页面，这完全取决于你计划在那里放置哪些演示。我会在移动设备上测试你的例子，看看它们是否有意义并在那里正常运行;如果他们这样做，那么显示它们。如果没有，要么改进它们以便在移动设备上工作，要么不在移动设备上显示它们。

关于响应式设计的一些建议

1 个答案: