使用响应式设计将元素大小从 PSD 转换为 HTML答案

【问题标题】：convert element sizes from PSD to HTML with responsive design使用响应式设计将元素大小从 PSD 转换为 HTML
【发布时间】：2013-12-08 05:23:09
【问题描述】：

我必须将 PSD 文件转换为具有响应式设计的 HTML5。这是我第一次这样做，我想要一些明确的方向。

当我从 PSD 中提取 CSS 文件时，我看到奇怪的东西，比如所有元素都在 position=absolute 中，这看起来很假。我假设我必须根据新的 HTML 进行更改？

如何让它响应不同的屏幕宽度和高度以及移动设备？如果我直接嵌入到 Bootstrap 元素应该这样做？

我应该从 PSD 计算每个元素的相对大小（相对于 PSD 文件的高度和宽度）并转换为 %？（例如：PSD 文件的主体 100px，PSD 文件中的 1 个元素 50px->HTML 中 element1 的 CSS 50%）

【问题讨论】：

【解决方案1】：

根据我的经验，最好的方法是slice the PSD 并仅提取那些需要成为图像的元素。然后创建您的 HTML 和 CSS。

如果您以前从未创建过响应式网站，我建议您查看Twitter Bootstrap 和Zurb Foundation。您可能会决定是否使用其中一个框架，但只需查看它们并使用示例即可让您很好地了解响应式网站的工作原理。

【讨论】：

【解决方案2】：

如果您可以使用 twitter 引导框架将 PSD 用于响应式 html 网站构建，那很好，因为所有框架都存在，无需进行任何设备级计算。

你可以在这里下载 twitter 引导文件，http://getbootstrap.com

希望有帮助，谢谢！

【讨论】：