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

本文关键字：于响应 响应 | 更新日期: 2023-09-27 18:14:48

我目前正在设计一个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等演示列表，以展示我的技能。我是否应该将其包含在手机版本中。我认为手机用户不能真正利用这一点?

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

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

移动用户的带宽更有限，连接速度更慢。当你考虑页面加载速度有多快时，你需要记住这一点，因为这将极大地影响用户体验。

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

滚动到可能会工作良好。如果你使用JavaScript的"scrollTo"功能，你可能需要考虑使用触摸事件而不是点击事件。(关于触摸事件的演示。)

至于您的playground页面，这完全取决于您计划在那里放置哪些演示。我会在手机平台上测试你的例子，看看它们是否行得通;如果有，就显示出来。如果没有，要么改进它们以适应手机平台，要么就不要在手机平台上展示它们。

相关文章：