响应式网页设计
Responsive Web Design
Ethan Marcotte · 初版 2011 年
5人推荐
7位读者提及
7次提及
摘自出版商[网站][1]：“从移动浏览器到上网本和平板电脑，用户正通过越来越多的设备和浏览器访问您的网站。您的设计准备好了吗？学会跳出桌面思维，打造能够预见并响应用户需求的精美设计。Ethan Marcotte 将深入探讨 CSS 技术与设计原则，包括流体网格（fluid grids）、弹性图片（flexible images）与媒体查询（media queries），演示无论用户的屏幕有多大（或多小），您都能为其提供高品质的体验。”[1]: http://www.abookapart.com/products/responsiv
Hacker News 上怎么说
正在加载完整评论……
前端方面更多的是各种杂七杂八的文章，尤其是来自 <https://alistapart.com/> 和 <https://www.smashingmagazine.com/> 的。一篇经典是 Ethan Marcotte 写的 Responsive Web Design[1]。你也可以去熟悉一下 Rachel Andrew 在 CSS layout[2] 方面的工作（我推荐把《The New CSS Layout》[3] 这本书作为现代 CSS 布局的入门佳作）。你……
For the front end there is more an assortment of articles, particularly from <https://alistapart.com/> and <https://www.smashingmagazine.com/>. A classic one is Responsive Web Design[1] by Ethan Marcotte. You can also familiarize your self with Rachel Andrew’s work[2] on CSS layout (and I recommend the book The New CSS Layout[3] as a good introduction to layout in modern CSS). You…
……在你开始之前”——你把学习响应式设计跟学怎么用 Bootstrap 搞混了。要真正从零开始学响应式设计，一个很好的起点是 Ethan Marcotte 的经典之作《Responsive Web Design》：http://www.abookapart.com/products/responsive-web-design
…before you start" — you're confusing learning responsive design with learning how to use Bootstrap. To actually learn responsive design from scratch, a good place to start is Ethan Marcotte's classic Responsive Web Design: http://www.abookapart.com/products/responsive-web-design
……用了 HTML5 Boilerplate http://html5boilerplate.com/ 和 Golden Grid System http://goldengridsystem.com/ 来实现这种超赞的、可调整大小的 mobile-first 设计。我们俩都是 Ethan Marcotte 那本《Responsive Web Design》的死忠粉：http://www.abookapart.com/products/responsive-web-design
…used the HTML5 Boilerplate http://html5boilerplate.com/ and Golden Grid System http://goldengridsystem.com/ for the lovely resizable mobile-first design. We're both big fans of Ethan Marcotte's book Responsive Web Design : http://www.abookapart.com/products/responsive-web-design
……移动端上哪怕在高 PPI 屏幕上字也太小了。切换到横屏通常会调大字号，同时保持每行都看得清。如果你还没看过，可以去搜搜 Responsive Web Design（响应式网页设计）相关的资料。Ethan Marcotte 在 A List Apart 上的那篇文章[1]是这场运动的重要火花，自那之后，沿着这个思路写出来和落地实现的东西多得去了。[1] http://alistapart.com/article/responsive-web-design/
…mobile and the text is just too small even on a high PPI display. Switching to landscape generally increases the text size while keeping each line visible. If you haven't already, search for resources on Responsive Web Design. Ethan Marcotte's essay[1] at A List Apart was a big spark under this movement, and a LOT more has been written and implemented in this vein since that was written. [1] http://alistapart.com/article/responsive-web-design/
……到一种被过度炒作的网页设计方法：MOBILE FIRST（移动优先）。Mobile-first 的设计在任何大尺寸设备形态上都会产生巨大的信息稀疏空白。大家真应该回头重新读读 Ethan Marcotte 的《Responsive Web Design》。他实际上是从桌面端设计出发，然后把它缩小的。根本没提什么移动优先。所以，从一个设计开始，平权（EQUALLY）考虑它在两种设备形态下的表现。别整那些 mobile-first 的烂玩意儿……
…to one overhyped method of web design: MOBILE FIRST. Mobile-first designs create gargantuan gaps of information sparseness on any larger form-factor. Folks should go back and re-read ethan marcotte‘a Responsive Web Design. He goes from actually a desktop design and shrinks it down. No mention of mobile-first. So, start with a design, and consider how it works on both form factors EQUALLY. None of this mobile-first crap…
……像“flexible”、“liquid”[47]、“fluid”和“elastic”这些词曾被用来描述布局。在 2008 年末/ 2009 年初，CSS3 media queries 已经基本准备好大放异彩了[48]。Ethan Marcotte 在 2010 年 5 月 A List Apart 的一篇文章中创造了 responsive web design[49]（RWD，响应式网页设计）这一术语——并将其定义为 fluid grid（流式网格）/ flexible images（自适应图片）/ media queries（媒体查询）[2]。他在 2011 年出版的一本简短小书里阐述了响应式网页设计的理论与实践……
…as "flexible", "liquid",[47] "fluid", and "elastic" were being used to describe layouts. CSS3 media queries were almost ready for prime time in late 2008/early 2009.[48] Ethan Marcotte coined the term responsive web design[49] (RWD)—and defined it to mean fluid grid/ flexible images/ media queries—in a May 2010 article in A List Apart.[2] He described the theory and practice of responsive web design in his brief 2011 book…