使HTML设计响应的步骤是什么？

Question

我刚刚了解了响应式设计。我的问题是，HTML设计师必须采取哪些步骤才能使设计响应？

看来，一个负责任的设计是所有关于使用@media查询和控制元素的页的流量，如果它得到通过设置max-width，min-width和操作取决于浏览器窗口的大小浮动，边距和填充调整。

是否有除了@media查询其他任何需要的响应式设计做？

Answer 1

响应图像（在HTML针对不同的情况不同的图像）是一个重要问题。

一些重要的位：

使用 srcset

• 属性为不同版本的同一图像之间进行切换。 http://responsiveimages.org是资源就这个问题很好。

• 成像使用自动化工具 - 我最喜欢的是步兵，在这里也差不多了一个很好的读取：http://addyosmani.com/blog/generate-multi-resolution-images-for-srcset-with-grunt/

它真的有很多不同之处，当用户在移动设备上打开一个页面尺寸被确定为它的图像，更少的数据和良好的负载更快:)

工具，比如咕噜可能看起来像他们采取一些工作设置，但一旦你开始使用它那么容易和快速。

更多的阅读材料：

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

http://blog.cloudfour.com/responsive-hero-images/

Answer 2

绝对。有从Marcotte的阮经天的原书回应式网页设计，回应式网页设计（abookapart.com/products/responsive-web-design）三个主要租户。它们是：

1 - 流体网格 -基于百分比的宽度代替布局/网格的像素。这可以说比媒体查询更重要，因为它可以让网站变得流畅而不固定。因此，智能手机和平板电脑的尺寸太大而无法计数，因此采用流畅的布局可确保您的设计能够很好地适应不同的设备宽度。

2 - 灵活图像 -它们基本上是在浏览器变小时收缩的图像。在响应的环境中，图像周围存在很多挑战，这就是为什么@ Ivan86巧妙地推荐在图像标签上使用srcset属性，我也强烈建议，但也可以等待，直到您熟悉基本知识为止。既然你是刚刚起步，让我们保持简单的用“灵活的图像”，这是被设定为max-width: 100%与基于％身边父容器的图像。这允许图像随着父容器（div，figure等）变小而缩小。不过，如果你碰巧对srcset感兴趣，我最近发布了两篇文章：www.richfinelli.com/srcset-part-1,http://www.richfinelli.com/srcset-part-2/，它解释了如何使用这个新属性。

3 - 媒体查询 -正如您所说，用于您的css根据可用的浏览器宽度更改布局。

正如我想你会发现，一旦你进入响应式网页设计，你会发现自己可能会遇到多层次的挑战。但是我建议从abookapart.com购买Ethan Marcotte的书以获得一个好的跳跃在上面。很短，实际上很有趣。