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

【问题标题】：Some advice on responsive design关于响应式设计的一些建议
【发布时间】：2011-11-17 00:56:39
【问题描述】：

我目前正在使用 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 等的演示列表，只是为了展示我的技能。我是否应该将其包含在移动版本中。因为我认为移动用户不能真正利用这一点？

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

【问题讨论】：

标签： c# mobile css styling

【解决方案1】：

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

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

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

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

【讨论】：