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

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 还是有办法阻止内容无缘无故地加载。

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

最后一件事，我打算在 wordpress 中创建一个新页面，并将其称为“ Playground ”之类的东西，其中包含 html5、CSS3 等的演示列表，以展示我的技能。我是否应该将其包含在移动版本中。我认为移动用户无法真正利用它？

我希望你能帮助我解决我的这些不确定性

Answer 1

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

我会避免在移动设备上使用幻灯片——或者至少使用适合屏幕尺寸的较小图像来制作幻灯片。例如，当您在 360 像素宽的屏幕上时，您无需下载 720 像素宽的图像。

滚动到可能会正常工作。如果您将 JavaScript 用于“scrollTo”功能，您可能需要考虑的一个因素是使用触摸事件而不是单击事件。 (一个 presentation on touch events .)

至于您的 playground 页面，这将完全取决于您计划将哪些演示放在那里。我会在移动设备上测试您的示例，看看它们是否有意义并且可以正常运行；如果他们这样做，则显示它们。如果不是，要么改进它们以在移动设备上工作，要么不要在移动设备上显示它们。