Javascript 响应性网页设计问题

我一直在阅读关于响应式网页设计（RWD）的书籍，并试图将我的大脑围绕这个概念

响应式网页设计真的是我们移动开发的方向吗？我喜欢拥有一个可以在台式机、笔记本电脑、平板电脑和手机等不同设备上运行的站点

在桌面上，我有一个大屏幕，所以我的网站就像它设计的那样工作。它有一个列，包含我的大部分主要内容，还有一个左侧或右侧宽度较小的列（取决于您在网站上的位置），用于导航。RWD如何确定哪些柱堆叠在哪些柱上？它是否从屏幕的左侧开始，首先加载左栏的内容，然后加载右栏的内容？是否可以删除一列，使其不在某些设备上显示？RWD能处理这样的事情吗？设备越宽，需要显示的内容就越多，而只需要显示必要内容的宽度就越小

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

如何在没有宽屏幕的手机上显示20列的数据网格？还有传呼

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

---

除了推特之外，还有其他合适的RWD框架吗？我听说过一些不错的框架。

这是一个非常大的问题。简言之，它通常是这样工作的：

构建包含所有内容和功能的移动站点

当内容变得更宽时，使用媒体查询/javascript重新格式化内容，可以是流畅的，也可以是带断点的，或者两者都有

添加任何仅在桌面版本上的功能（理想情况下不会有任何功能）

如果需要，您可以使用ajax加载其他内容等，尽管通常您会有相同的内容（为什么30-40%的访问者希望对他们隐藏内容？）

您通常会将注意力集中在智能手机上，而不是没有现代网络浏览器的旧手机

对于具体情况，例如具有20列的网格，这很困难

也许翻转桌子，所以它是另一种方式，有20行，显示它作为一张图表，让它左右滑动，或者只是想想为什么它在那里-这是一个不寻常的事情在一个网站上。 分页通常作为一个无限卷轴来完成，例如苹果的邮件应用程序

---

就框架而言，没有任何框架可以为您解决所有问题。Zurb的基础和Bootstrap的网格方面是有用的，但它不会使所有的事情都突然发生。

< P>这是一个技巧和一个最佳实践的集合，然后是一些对你有积极作用的东西。 创建响应性（Web）设计意味着为访问者/用户提供使用任何设备的最佳使用体验

但是，如何结合屏幕大小和输入设备来设计内容（网页、webapp、app），以便获得最佳的使用体验，这是您需要自己为您的特殊用例弄清楚的

有一些技术可以帮助您找出哪些元素对用户很重要，以及应该如何显示它们，但没有一般规则规定哪些元素需要放在哪个位置。（规则总是正确的，但也有一些品味和随时间变化的问题）

那么如何进行响应设计呢？ 首先，你必须找出你的内容中哪些元素是重要的，如果这些元素的重要性与用例不同（你有没有想过桌面用户可能会期待来自同一页面/应用程序的其他信息，然后是移动用户）

如果你知道哪些元素是重要的，你可以考虑如何呈现它们。这里最重要的部分是确定屏幕大小，以及所使用的输入设备，您不希望使用小列表或小导航按钮来显示手机

我们已经有了另一个问题。与手写笔一起使用的表格是什么？有触摸屏的笔记本电脑呢？如何考虑这些因素？这也取决于你，因为设备的使用方式会随着时间的推移而改变

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

但响应性设计并不意味着某些东西会自动决定哪些屏幕尺寸需要更改。但是，如果您定义了不同部件在不同用例下的外观和行为（通过自己动手或使用一个尽可能为您服务的库）

要“处理”更便宜的手机，而不是智能手机，您可以使用

@手持媒体和（方向：纵向）{…}

如果“手持”智能手机在检查“手持”时返回真值，这将是直观的，但它们不会。所以，如果你想优化旧的手持设备，你可以选择手持媒体

另外请注意，

@media screen和…

或一些类似的查询不会针对较旧的非智能手机，因为它们不是“media screen”

---

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

您的响应式web设计（RWD）解决方案在bootstrap中。如果您想在网站中使用20网格系统，可以使用以下链接使用自定义引导CSS:。这样你就可以转换站点i了