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

我目前正在用wordpress设计一个组合网站。这个想法是，它将全部放在一个页面中，并使用js来上下滚动。关于响应式设计的一些建议

以固定宽度编码整个事物后，我想到了响应式设计。我开始阅读，我想我明白了。在做其他任何事情之前，我会回到Photoshop并重新编辑移动设计 - 快速查看我想要的移动设备（几乎是移动的第一个，至少在Photoshop上，忽略我已经有的东西）

In我目前的设计，我用幻灯片显示我的工作示例。我正在使用这个插件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内创建一个新页面，并将其称为“操场”，它将在html5，CSS3等演示列表中展示我的技能。我是否应该将其包含在移动版本中？我认为移动用户无法真正利用这一点？

我希望你能帮助我与任何这些不确定性，我有

来源

2011-11-17 aurel

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

我会避免使用移动幻灯片 - 或者至少做一个幻灯片放映，使用适合屏幕尺寸的较小图像。例如，当您在360像素宽的屏幕上时，您不需要下载720像素宽的图像。

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

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

来源

2011-11-23 08:55:03 calvinf

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

回答

相关问题