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

我必须使用响应式设计将PSD文件转换为HTML5。这是我第一次这样做，我想要一个明确的方向。使用响应式设计将元素大小从PSD转换为HTML

当我从PSD中提取CSS文件时，我发现像所有元素都在位置=绝对的奇怪的东西，这似乎很虚。我认为我必须根据新的HTML进行更改？

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

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

PSD是Photoshop本机格式。你用什么工具从PSD中提取CSS？ –

Photoshop本身...在图层的左下并“复制CSS” – user1249791

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

如果您以前从未创建过响应网站，我建议您查看Twitter Bootstrap和Zurb Foundation。您可能决定使用其中一种框架，但只要查看它们并使用示例，就可以了解网站的响应情况。

2013-11-23 19:14:57 Tim

如果你可以使用twitter引导框架工作的PSD来响应html网站建设，这将是好的，导致所有与框架的工作，不需要进行任何设备级别的计算。

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

希望它的帮助，谢谢！

2015-02-27 10:10:55

回答