使用響應式設計將元素大小從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

回答