如何使用顺风CSS使设计响应于两种不同的背景

Question

我从 Figma 设计中获取这张图片，我需要映射此设计以与 Tailwind CSS 像素完美 100% 做出反应。 Macbook Pro 16 英寸宽度为 1728px，但我需要使用宽度为 1300px 的自定义容器制作内容中心。因此，当它在更宽的屏幕上打开时，内容应位于宽度为 1300 px 的中心容器中，并且背景应扩展到两侧的空白区域。

一些说明：

1. 背景应跨越整个视口宽度：这意味着背景应拉伸到浏览器窗口的整个宽度，无论屏幕尺寸如何
2. 内容容器应该有一个最大宽度：中央容器内的内容不应超过 1300px，确保它不会在大屏幕上拉伸太宽，以获得更好的可读性和布局控制
3. 将内容容器居中：当屏幕宽度大于 1300px 时，使容器在视口中保持居中

执行此操作的最佳方法是什么？

Answer 1

尝试将主要内容宽度设置为 90% 并设置 margin: 0 auto;它将位于中心，左右留出一些空白。