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

Question

一个非常挑剔的设计师正在建造一个带有~1900 is 的PSD。

客户端要求当网站在桌面上打开时，必须看起来与PSD相同。这是他们唯一关心的事情，或客户不会批准该网站。PSD并不是用引导栅格来建立的。

我的问题是：

1-我如何开始翻译一个1900 PSD的引导带？

2-我正在考虑一种方法:建立一个全宽度的网站(容器-流体)，并添加左和右间隔，这样网站将看起来在所有桌面决议相同。我的意思是在不限制页面宽度的情况下。

请给我其他的建议。我不想丢工作。

Answer 1

您可以自定义断点$格栅-断点和$容器-最大宽度。

@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/

Answer 2

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

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

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

你也需要弄清楚“看上去一样”是什么意思。首先，不同的浏览器、操作系统和用户设置总是导致差异，这是无法避免的。另外，当一些东西需要改变，但是布局不支持它时，会发生什么？例如，较长的复制文本或新的主菜单项，这是不合适的。

好像每个人都在他们头上。单是私营部门司目前并不是设计网页的合适工具(除了初稿之外)似乎就证明了这一点。

你可能被夹在岩石和困难的地方之间。如果您创建的站点与设计完全相同，但是由于设计的不灵活性，它会崩溃，那么客户可能会责怪您，但是如果您以不同的设计成本使站点更加灵活，那么客户可能不会接受它。

你的问题似乎表明你可能还没有准备好应付这一任务的陷阱。听起来，这个设计不适合用Bootstrap实现(或者至少Bootstrap不会比不使用Bootstrap更容易实现)。如果你对CSS有足够的了解，不需要引导，那么你就不需要问这个问题，因为你知道的足够多，可以自己修改引导。

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