响应式网页设计问题

Responsive web design questions

本文关键字：问题网页设计响应更新时间：2023-09-26

我一直在阅读响应式网页设计(RWD)，并试图将我的大脑围绕这个概念。

响应式网页设计真的是我们应该去移动开发的方式吗?我喜欢这样的想法:一个网站可以在许多不同的设备上运行，比如台式机、笔记本电脑、平板电脑和手机。

在台式机上，我有一个宽屏幕，所以我的网站就像它设计的那样工作。它有一个列与我的大部分主要内容和一个左或右较小宽列(取决于你在网站上的位置)导航的目的。RWD如何确定哪些列堆叠在哪些列上?它是从屏幕的左侧开始，首先加载左列的内容，然后加载右列的内容吗?是否有可能可能删除列，使其不显示在某些设备上?RWD能处理这样的事情吗?屏幕越宽，你想显示的内容就越多;屏幕越宽，你想显示的内容就越少。

RWD如何处理更便宜的手机?不是真正的智能手机?如果手机不能处理RWD，会发生什么?

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

就是这样的东西，我不知道RWD是否适合我?我喜欢简洁的网站，而不是把所有内容都塞进手机屏幕的边框里。

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

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

构建具有所有内容和功能的移动站点。
使用media queries/javascript在内容变宽时重新格式化，可以流畅地使用，也可以使用断点，或者两者都使用。
添加任何只在桌面版本上的功能(理想情况下不会有任何)

你可以使用ajax加载额外的内容等，如果需要的话，虽然通常你会有相同的内容(为什么30-40%的访问者想要隐藏的东西从他们?)

你通常关注的是智能手机，而不是没有现代浏览器的旧手机。

对于细节，例如20列的网格，很难。

也许将表格翻转成另一种方式，并有20行，将其显示为图表，使其左右滑动，或者只是考虑为什么它在那里-这是一个不寻常的东西在一个网站上。

分页通常是通过无限滚动来完成的-例如苹果的邮件应用程序。

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

它更多的是一种技术和最佳实践的集合，而不是为你做一些积极的事情。

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

但是你要如何设计你的内容(网页，网页应用，应用程序)结合屏幕尺寸和输入设备，这样你就有最好的使用体验，这是你需要为你的特殊用例自己弄清楚的。

有一些技巧可以帮助你发现哪些元素对你的用户来说是重要的，以及你应该如何显示它们，但是没有一个通用的规则可以规定哪些元素应该放在哪个位置。(规则总是正确的，但也有一些品味问题，随着时间的推移而改变)

那么如何进行响应设计呢?首先，你必须找出你的内容中哪些元素是重要的，以及这些元素的重要性是否与用例不同(你是否想过桌面用户可能希望从同一页面/应用程序获得其他信息，而不是移动用户)

如果你知道哪些元素是重要的，你就能想到如何呈现它们。这里重要的部分是屏幕大小，还有使用的输入设备，你不想让手机使用一个小列表或小导航按钮。

我们已经有了另一个问题。带触控笔的桌子怎么样?有触摸屏的笔记本电脑怎么样?如何考虑这些因素?这也取决于你，因为设备的使用方式会随着时间的推移而改变。

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

但是响应式设计并不意味着某些东西会自动决定需要为哪个屏幕尺寸更改什么。但是，你定义了不同的部分应该如何为不同的用例看起来和行为(要么通过自己做，要么通过使用一个试图为你做最好的库)

来"处理"更便宜的手机，而不是智能手机，你可以使用@media handheld and (orientation: portrait) { ... }如果"手持"智能手机在检查"手持"时返回true，这将是直观的，但事实并非如此。所以如果你想优化旧的手持设备，你可以媒体手持。

还要注意@media screen and ...或一些类似的查询不会针对较旧的非智能手机，因为它们不是"媒体屏幕"。

这回答了你的一个问题。但只有很小一部分用户在使用这类设备，至少现在是这样。根据你的人口统计，你最好还是忽略那些旧手机。

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