5

我一直在阅读响应式网页设计(RWD)并试图围绕这个概念来思考。

响应式网页设计真的是我们应该采用的移动开发方式吗?我喜欢拥有 1 个可以在台式机、笔记本电脑、平板电脑和手机等多种不同设备上运行的网站的想法。

在桌面上,我有一个宽屏幕,所以我的网站按照设计的方式运行。它有一个包含我的大部分主要内容的列和一个用于导航目的的左侧或右侧较窄的列(取决于您在网站上的位置)。RWD 如何确定哪些列堆叠在哪些列上?它是否从屏幕左侧开始,首先加载左列的内容,然后加载右列的内容?是否可以删除一列以使其不在某些设备上显示?RWD可以处理这样的事情吗?设备越宽,您想要显示的内容就越多,而您希望只显示必要的东西的宽度越小。

RWD 如何处理更多更便宜的手机?不是真正智能手机的手机?如果手机无法处理 RWD 会发生什么,然后呢?

如何在没有宽屏的手机上显示 20 列的数据网格?和分页?

这样的东西我不知道RWD是否适合我?我喜欢整洁的网站,而不是为了让内容进入手机屏幕的边框而把所有东西都挤进去。

除了 Twitter bootstrap,还有其他像样的 RWD 框架需要考虑吗?我听说过一些不错的框架。

4

4 回答 4

5

这是一个非常大的问题。简而言之,它通常是这样工作的:

  1. 构建具有所有内容和功能的移动网站。
  2. 使用媒体查询/javascript 在内容变宽时重新格式化内容,可以流畅地或使用断点或两者兼而有之。
  3. 添加仅在您的桌面版本上的任何功能(理想情况下不会有任何功能)

如果需要,您可以使用 ajax 加载其他内容等,尽管通常您会拥有相同的内容(为什么 30-40% 的访问者希望隐藏内容?)

您通常在这里关注智能手机,而不是没有现代网络浏览器的旧手机。

对于细节,例如具有 20 列的网格,这很难。

也许翻转表格,让它变成另一种方式,有 20 行,将其显示为图表,使其左右滑动,或者只是考虑为什么会出现在其中 - 这在网站上是一件不寻常的事情。

分页通常以无限滚动的方式完成——例如 Apple 的 Mail 应用程序。

就框架而言,没有任何框架可以为您解决所有问题。Zurb 的 Foundation 和 Bootstrap 的网格方面很有用,但它不会让一切突然工作。

于 2013-06-11T07:38:23.370 回答
0

好吧,它更像是一种技术和最佳实践的集合,然后是为您积极做某事的东西。

创建响应式(Web)设计意味着为访问者/用户提供任何使用设备的最佳使用体验。

但是,如何结合屏幕尺寸和输入设备设计内容(网页、webapp、应用程序)以便获得最佳使用体验是您需要自己针对特殊用例弄清楚的事情。

有一些技术可以帮助您找出哪些元素对您的用户很重要,以及您应该如何显示它们,但没有一般规则哪些元素需要位于哪个位置。(这些规则总是正确的,但也有一些品味问题和随着时间的推移而变化)

那么怎么做Response Designe呢?那么首先你必须找出你的内容的哪些元素是重要的,如果这些元素的重要性与用例不同(你有没有想过桌面用户可能期望来自同一页面/应用程序的其他信息然后移动用户)

如果您知道哪些元素是重要的元素,您可以考虑如何呈现它们。这里重要的部分是确定屏幕尺寸,还有使用什么输入设备,你不想让手机使用一个小列表或小导航按钮。

还有一个问题。与触控笔一起使用的表格是什么?有触摸屏的笔记本电脑怎么样?如何将它们考虑在内?这也取决于您,因为设备的使用方式会随着时间而变化。

当然,有不同的框架可以帮助您或已经自动完成许多事情。但是你不应该期望他们会创造最好的用户体验。框架有,比如说常见情况用例的模板,它们确实会自动更改您的菜单并确定如何显示它。

但是响应式设计并不意味着某些东西会自动确定需要针对哪种屏幕尺寸进行更改。但是您定义了不同部分在不同用例中的外观和行为方式(通过自己动手或使用试图为您做到最好的库)

于 2013-06-11T08:31:59.093 回答
0

要“处理”更便宜的手机,而不是智能手机,您可以使用 @media handheld and (orientation: portrait) { ... } 如果“手持”智能手机在检查“手持”时返回 true 但它们没有,这将是直观的。因此,如果您想针对旧的手持设备进行优化,您可以使用媒体手持设备。

另请注意,@media screen and ...某些此类查询不会针对较旧的非智能手机,因为它们不是“媒体屏幕”。

这回答了您的各种问题之一。但至少在今天,只有极少数用户使用这种类型的设备。根据您的人口统计,您最好忽略那些旧手机。

于 2015-02-27T02:19:58.460 回答
-1

引导程序中的响应式网页设计 (RWD) 解决方案。如果您想要在您的网站中使用 20 个网格系统,您可以使用以下链接自定义引导 CSS:http: //getbootstrap.com/customize/。这样您就可以在移动视图中转换网站。根据我的观点,这是解决您的问题的最佳方法。

于 2015-07-08T11:19:15.563 回答