javascript - 响应式网页设计问题

原文 标签 javascript css html responsive-design

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

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

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

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

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

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

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

最佳答案

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

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

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

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

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

    或许将表格翻转成相反的方式,并有 20 行,将其显示为图表,使其左右滑动,或者只是考虑为什么它在那里 - 这在网站上是不寻常的事情。

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

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

    关于javascript - 响应式网页设计问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17038708/

    相关文章:

    css - Material Design Lite菜单在名片设计中不起作用

    javascript - 启用/禁用全屏选项 video.js HTML5

    html - 以固定比例为 float div 添加边框

    javascript - Javascript如何隐藏短语的div onclick

    javascript - 在移动浏览器上打开 Materializecss 模态时如何防止背景滚动?

    javascript - 在对象之间创建链接

    javascript - 创建可选择的 li 项作为按钮

    html - 在IE中无法将文字旋转为垂直

    javascript - 将基于回调逻辑的库函数集成到 Promise 链中

    javascript - 在文本框内按下退格键时发出警报