1

网络上有很多关于响应式设计的文章,以及如何使用 css 媒体查询来实现您的目标。然而,它们中的大多数似乎是在 2011 年编写的,当时响应式设计开始流行。

自 2011 年以来,市场上已经发布了许多不同的设备,它们具有多种设备宽度和各种 ppi,2011 年的媒体查询不一定会涵盖。我主要指的是 Galaxy Note I/II 等大尺寸移动设备以及 7 英寸平板电脑,甚至是视网膜显示器等高 ppi 设备。

是否有任何资源可以维护最新的 css 媒体查询代码,这些代码将用于充分覆盖大多数设备的最佳实践方法?

4

3 回答 3

4

响应式设计不仅仅是“媒体查询”,响应式设计鼓励开发人员和设计师以各种可能的方式拥抱可访问性。

我强烈建议前往 twitter(因为这是所有精彩对话发生的地方)并立即创建一个帐户并关注这些了不起的人:@beep 之后没有特别的顺序:

  • @beep - Ethan Marcotte,推广响应式设计的人。
  • @RWD - Ethan Marcotte 的帐户,他在其中发布与响应式 Web 设计相关的内容。
  • @lukew - 卢克 Wroblewski。
  • @brad_frost -布拉德弗罗斯特
  • @Trentwalton -特伦特沃尔顿
  • @adactio -杰里米·基思
  • @scottjhel -Scott Jhel Picturefill 的创建者,一种用于响应式图像和其他一些很酷的东西的 polyfill。
  • @wilto - 马特侯爵。
  • @smashingmag - 粉碎杂志。
  • @grigs -杰森·格里格斯比
  • @globalmoxie -乔什·克拉克
  • @chriscoyier - Chris Coyier ,一切 CSS ..
  • @malarkey -安迪克拉克
  • @jordanmoore -乔丹摩尔
  • @viljamis - Viljami Salminen

    我可能遗漏了一些人,但这是一个很好的起点!您一定会在一天中的任何时候遇到一些与响应式设计相关的良好对话或链接或文章。

    此外,他们几乎每天都在他们的网站上写关于响应式网页设计的文章,所以一定要检查一下。就在那儿,你有很多读物。

    一些不错的读物:
    条件加载内容
    响应式设计的条件加载
    创建移动优先响应式 Web 设计
    EM 拥有它:比例媒体查询 FTW!- 推荐阅读。
    这是响应式的 - 从整个网络收集的有关响应式网页设计的链接和内容的汇总,由 Brad Frost 策划。

    至于出版日期,它们是不相关的;如果内容过时或方法过时,作者很可能会删除它或相应地标记它。

    编辑:还有一些很好的工具来测试你的网站:
    Responsive.is - 测试你的设计在各种屏幕尺寸上的表现。
    responsivepx.com - 通过在“px”中输入屏幕宽度来准确了解您的设计在哪里中断。
    pxtoem - 将像素单位转换为 ems。
    Izilla Media Query Debugger - 这个插件显示浏览器窗口的大小(有点像 responsivepx.com,但在本地工作)。
    Opera Mobile Emulator - 在 Opera Mobile 上测试您的网站。
    Opera Mini Simulatr - 在 Opera Mini 上测试您的网站(适用于低端设备)。

    请记住,不要流行的屏幕尺寸设计!当您的设计中断时插入断点(媒体查询)。相关: http: //www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid

  • 于 2012-09-20T20:38:12.747 回答
    1

    我知道没有这样的媒体查询库,原因如下:

    响应式设计的最佳实践方法是在您的设计中使用媒体查询。一个适当的响应式站点应该根据用户的屏幕大小调整大小,并且当且仅当用户体验需要调整时,才应该使用媒体查询。

    要找到设计的断点,请调整浏览器的大小,直到页面变得难以阅读、出现剪辑或其他一些 UI/UX 问题很明显。注意屏幕尺寸并对该断点进行必要的调整。

    一些阅读: http ://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design

    如果您不想使用这种方法,您可以将框架视为最佳实践的来源。我喜欢和经常使用的一个是 Foundation http://foundation.zurb.com,还有其他像 Bootstrap http://twitter.github.com/bootstrap/

    这些都是出色的工具,但是您会发现自己退后一步并最终发现更适合您的设计的断点。Foundation 是启动项目的绝佳起点。

    进一步阅读:

    于 2012-09-20T18:14:36.850 回答
    -1

    来自 twitter 的 Bootstrap 对您来说可能是一个很好的起点。

    http://twitter.github.com/bootstrap/

    于 2012-09-20T20:34:45.780 回答