PSD到引导程序-请建议保持HTML与大PSD相同



一个非常挑剔的设计师正在构建一个具有~1900px的PSD。

客户端要求当网站在桌面上打开时,必须看起来与PSD相同。这是他们唯一关心的,否则客户将不会批准该网站。PSD不是用引导网格构建的。

我的问题是:

1-我如何开始用Boostrap翻译1900px的PSD?

2-我正在考虑一种方法:用全宽(.container fluid(构建网站,并添加左右间距,这样网站在所有桌面分辨率下看起来都一样。我的意思是不限制页面宽度。

请给我其他建议都没问题。我不想丢掉我的工作。

您可以自定义断点$grid断点和$container最大宽度

@import "bootstrap/functions";
@import "bootstrap/variables";
$grid-breakpoints: (
xs: 0,
sm: 600px,
md: 800px,
lg: 1000px,
xl: 1900px
);
$container-max-widths: (
sm: 600px,
md: 800px,
lg: 1000px,
xl: 1840px
);
@import "bootstrap";

查看此处的文档以了解更多详细信息:https://getbootstrap.com/docs/5.0/layout/breakpoints/

(我知道这不是一个技术性的答案,可能会被认为偏离主题,但作为评论发布太长了,我认为这很重要。(

老实说:这听起来像一场噩梦。

你/你的老板/你的客户是否意识到,或者已经意识到这种方法可能导致的问题?例如,它可能无法在移动设备上使用。或者它可能会导致可访问性问题(甚至可能产生法律后果!(

你还真的需要确定什么是";看起来一样";方法首先,不同的浏览器、操作系统和用户设置总是会导致差异,这是不可避免的。此外,当某个东西需要更改,但布局不支持时,会发生什么?例如,较长的复制文本或新的主菜单项不适合。

似乎每个人都有点不知所措。PSD并不是当今设计网页的正确工具(除了初稿(,这一事实似乎证明了这一点。

你可能会陷入进退两难的境地。如果你构建的网站与设计完全一样,但由于其不灵活而中断,那么客户可能会责怪你,但如果你以设计上的一些差异为代价使网站更加灵活,那么客户也许不会接受它

你的问题似乎表明你可能还没有为这项任务的陷阱做好准备。听起来这个设计不适合用Bootstrap来实现(或者至少Bootstrap不会让它比不使用Bootstrap更容易(。如果你对CSS有足够的了解,可以在没有Bootstrap的情况下完成它,那么你就不需要问这个问题,因为你已经足够了解自己修改Bootstrap了。

我能给出的最好建议是:确保与客户的所有沟通都写下来(而不仅仅是口头协议(,并向老板/客户问很多问题,以便所有细节都清楚(再次以书面形式(。

最新更新