响应式设计与移动优先和禁用的JavaScript

时间:2013-05-03 05:20:40

标签: javascript responsive-design media-queries

我正在试图弄清楚如何简化响应式设计的开发过程。标准方法是首先使用从移动设备到桌面尺寸的媒体查询来设计移动设备。

我看到的问题是支持IE7和IE8。每个人都要使用的解决方案是使用response.js。那些支持那些禁用javascript的人呢?有没有我没见过的东西?

编辑:我知道有一小部分用户已停用JS。这是该项目的要求。

3 个答案:

答案 0 :(得分:2)

Mobile First遵循优雅降级的路径。简单地说,“我们只提供向后支持,或者你什么也得不到”。对于旧版浏览器,一无所获。这是填充,补丁和变通方法的路径,这是脚本正在尝试做的事情。

另一方面,渐进增强只能满足浏览器的所有基本功能。这就像“我们支持所有你支持的最新产品”。这就是你要做的,以及你应该做的事情。

因此,让我们利用CSS正在级联的事实。最初使用固定或流畅的布局,然后使用响应式布局。对于不了解媒体查询的浏览器,将简单地忽略它,让您的固定或流畅的样式闪耀。

移动浏览器支持媒体查询或者JS很可能已启用。 Wap浏览器也可以使用流畅的布局。


*对于JS,95%的用户都有JS。

是另外5%的人
  1. 有过时的浏览器(Mosaic?)
  2. 根本不是桌面浏览器(抓取工具,代理服务器,抓取工具)
  3. wap浏览器(除了一些浏览器,例如Opera Mini,它们在加载时运行一些JS)
  4. 和害怕JS的偏执狂的人。
  5. *现在,其中有多少实际上是浏览器?最有可能是#3和#4。 IE有什么机会? 1/3?为了使用纯CSS而不使用JS方法,为了使用纯CSS而触及5%人口的一半的概率是多少?

    不要依赖存在可能性的事实。这些是极端情况,在现实世界中,只有十亿分之一的情况发生。来自用户体验的人会说:人口统计

    *夸大估计

答案 1 :(得分:0)

这是2013年。如果某人有js残疾,他们知道他们的网络体验会很糟糕。不仅在您的网站上,而且在所有地方。它不到1%的用户,所以不要担心。您可以/应该基本上假设已启用js。

答案 2 :(得分:0)

使用ie.css表单的条件注释,为旧版IE制作一个固定宽度版本的桌面大小版本。 (参见http://html5boilerplate.com/以获得一个很好的例子)

Respond.js经常运行得非常慢,而且比“传统的固定宽度”IE 7,8更难调试。因此,支持更多工作(即使它不是支持非js用户的项目要求的一部分)。

关于它从最终用户的角度来看。如果我需要借用运行IE 7的奶奶米色塔,我宁愿拥有一个更快,固定宽度的网站,然后是一个错误的,响应缓慢的网站。这些都是旧计算机,用户习惯于固定宽度的站点。

还考虑使用SASS来帮助解决断点问题。我最喜欢的mixin是“Breakpoint”。查看此处与支持不支持媒体查询的浏览器相关的文档。简而言之,您将一个变量添加到媒体查询中以查看“导出到我的IE.css = true”,然后这些变成了ie.css工作表的核心组件,而且自定义IE工作要少。

https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks