我一直在阅读响应式网页设计(RWD),并试图围绕这个概念进行思考。
响应式网页设计真的是我们应该采用移动开发的方式吗?我喜欢有一个网站应该适用于台式机,笔记本电脑,平板电脑和手机等许多不同设备的想法。
在桌面上我有一个宽屏幕,所以我的网站就像它的设计一样。它有一个列,其中包含我的大部分主要内容以及左侧或右侧较宽的列(取决于您在网站上的位置)以进行导航。 RWD如何确定哪些列堆叠在哪些列上?它是从屏幕左侧开始,首先加载左列的内容然后加载右列的内容?是否可以删除列以使其不显示在某些设备上? RWD可以处理这样的东西吗?设备越宽,您想要显示的内容越多,您想要显示的内容就越少。
RWD如何处理更便宜的手机?那些不是真正智能手机的手机?如果手机无法处理RWD会发生什么呢?
如何在没有宽屏幕的手机上显示20列数据网格?和分页?
这样的东西我不知道RWD是否适合我?我喜欢整洁的网站,而不是把所有内容都压扁,只是为了让内容进入手机屏幕的边框。
除了Twitter bootstrap,还要考虑其他任何体面的RWD框架吗?我听说过一些不错的框架。
答案 0 :(得分:5)
这是一个非常大的问题。简而言之,它通常是这样的:
如果需要,你可以使用ajax加载其他内容等,但通常你会有相同的内容(为什么30-40%的访问者想要隐藏它们的内容?)
您通常关注的是智能手机,而不是没有现代网络浏览器的旧手机。
具体情况,例如有20列的网格,很难。
或许翻转桌子,这是另一种方式,并且有20行,将其显示为图形,使其向左和向右滑动,或者只考虑为什么它在那里 - 这是一个不寻常的事情网站。
分页通常以无限滚动方式完成 - 例如Apple的邮件应用程序。
就框架而言,没有任何可以解决所有问题的方法。 Zurb的Foundation和Bootstrap的网格方面很有用,但它不会让一切都突然发挥作用。
答案 1 :(得分:0)
嗯,这更像是一种技术和最佳实践的集合,然后是一些积极为你做事的东西。
创建响应式(Web)设计意味着为访问者/用户提供使用的任何设备的最佳使用体验。
但是你必须如何设计你的内容(网页,webapp,app)以及屏幕尺寸和输入设备,这样你才能获得最佳的使用体验,这是你需要自己想出的特殊用例。
有些技巧可以帮助您找出哪些元素对您的用户很重要以及如何显示它们,但是没有一般规则哪些元素需要在哪个位置。 (总是规则是真的,但也有一些品味和随时间变化的事情)
那么如何做 Response Designe 呢? 首先,你必须找出你的内容的哪些元素是重要的,如果这些元素的重要性与用例不同(你有没有想过桌面用户可能期望来自同一页面/应用程序的其他信息然后移动用户)
如果您知道哪些元素是重要元素,您可以考虑如何呈现它们。这里的重要部分是确保屏幕大小,还有使用什么输入设备,你不想显示手机使用小列表或小导航按钮。
我们还有其他问题。什么是与手写笔一起使用的表?那些带触摸屏的笔记本电脑怎么样?如何将它们考虑在内?这也是由您决定的,因为设备的使用方式会随着时间而变化。
当然,有不同的框架可以帮助您或已经自动执行许多操作。但是你不应该期望他们会创造最好的用户体验。 对于常见情况用例,有框架可以说 templates ,它们确实会自动更改菜单并确定如何显示它。
但响应式设计并不意味着某些内容会自动确定哪些屏幕尺寸需要更改。但是,您可以定义不同部分在不同用例中的外观和行为方式(通过自己动手或使用试图为您做到最好的库)
答案 2 :(得分:0)
要“处理”更便宜的手机,而不是智能手机,你可以使用
@media handheld and (orientation: portrait) { ... }
如果“掌上电脑”的智能手机在检查“掌上电脑”时会返回真实情况,那么这将是直观的,但事实并非如此。因此,如果您想针对旧的手持设备进行优化,您可以使用媒体手持设备。
另请注意,@media screen and ...
或某些此类查询不会定位较旧的非智能手机,因为它们不是“媒体屏幕”。
这回答了你的一个问题。但至少在今天,只有很小一部分用户使用此类设备。根据您的人口统计,您可能最好忽略那些旧手机。
答案 3 :(得分:-1)
您在自举中的响应式网页设计(RWD)解决方案。如果您想在您的网站中使用20个网格系统,则可以使用以下链接使用自定义引导程序CSS:http://getbootstrap.com/customize/。这样您就可以在移动视图中转换网站。根据我的观点,这是解决问题的最佳方法。