使 HTML 设计具有响应性的步骤是啥？ [关闭]

Posted 2023-03-06

【中文标题】使 HTML 设计具有响应性的步骤是啥？ [关闭]

【英文标题】：What are the steps to make a HTML design responsive? [closed]使 HTML 设计具有响应性的步骤是什么？ [关闭]

【发布时间】：2015-11-18 14:21:30

【问题描述】：

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

似乎响应式设计就是使用@media 查询和控制页面上元素的流动，如果它通过设置max-width、min-width 并根据浏览器窗口的浮动、边距和填充来调整大小大小。

除了@media 查询之外，响应式设计还有什么需要做的吗？

【问题讨论】：

讨厌这么说，但没想到有这么高声望的人会提出这么基本的问题。我明白了，你现在可能正在学习 html；但是你有关于 SO w.r.t 的教程和问题，这看起来像一个简单的谷歌搜索问题。是的，响应式意味着您对不同的媒体尺寸有不同的 CSS 规则。别往心里放;只是说:)

有些人可能会说设计师要做的就是选择一个好的响应式库并使用它。

没有一套步骤可以让网站做出响应。您的问题过于宽泛，类似于问“我如何建立网站”？

嗨@TheUknown。你说的代表是什么意思？我问这个问题来学习。谢谢。 :)

【参考方案1】：

响应式图片（不同情况下的HTML不同图片）是很重要的一个。

几个重要的部分：

使用srcset 属性在同一图像的不同版本之间切换。 http://responsiveimages.org 是关于这个主题的大量资源。

使用自动化工具进行成像 - 我最喜欢的工具之一是 Grunt，这是一篇不错的文章：http://addyosmani.com/blog/generate-multi-resolution-images-for-srcset-with-grunt/

当用户在移动设备上打开一个带有适合其大小的图像、更少的数据和更快的加载速度的页面时，这确实会产生很大的不同:)

像 Grunt 这样的工具可能看起来需要一些工作来设置，但是一旦你开始使用它，它就会变得如此简单和快速。

更多阅读材料：

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

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

【讨论】：

非常感谢 Ivan68。你的回答很有价值。帮了大忙！

【参考方案2】：

当然。从 Ethan Marcotte 的原著 Responsive Web Design (abookapart.com/products/responsive-web-design) 中可以看出响应式网页设计的三个主要租户。他们是：

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

2 - 灵活的图像 - 基本上是在浏览器变小的时候缩小的图像。在响应式上下文中，图像存在很多挑战，这就是为什么@Ivan86 巧妙地建议在图像标签上使用srcset 属性，我也强烈建议您这样做，但也可以等到您对基础知识感到满意为止.由于您刚刚开始，让我们使用“灵活图像”保持简单，这些图像设置为max-width: 100%，其周围有一个基于 % 的父容器。这允许图像随着父容器（div、图形等）变小而缩小。不过，如果你碰巧对srcset 感兴趣，我最近发表了两篇文章：www.richfinelli.com/srcset-part-1、http://www.richfinelli.com/srcset-part-2/，解释了如何使用这个新属性。

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

我想你会发现，一旦你进入响应式网页设计，你就会意识到你会发现自己面临多层挑战。但我建议从 abookapart.com 购买 Ethan Marcotte 的书，以获得良好的跳跃它。很短，实际上很有趣。

【讨论】：

感谢这个答案非常有价值！我只知道媒体查询。现在我知道其他部分了。一个后续问题 - 最大宽度可以替代百分比吗？

对于流畅的布局，我只在最外面的容器上使用硬像素值的“最大宽度”。并且还使用设置为百分比的宽度。类似于：.wrapper max-width: 960px;width: 85%;。这使得宽度永远不会超过 960px 宽。因此，在超宽屏幕显示器上，您永远不会处理 1400 像素宽的布局。但是当宽度小于 960 像素时，您将获得流畅的布局，因为宽度设置为 85%。

谢谢，这很好！