我正在用Next.js和Tailwind构建前端。在宽度〈500 px的屏幕上存在死区的问题。例如，如果屏幕是400 px宽，那么死区将是100 px宽。或者如果屏幕是350 px宽，死空间将是150 px。当页面加载到较小的屏幕（〈500 px）时，将显示全宽（渲染区域+死区）。从下面的屏幕截图中可以看出，这似乎不是布局/嵌套问题，因为根<html>元素的宽度为400 px。
<html>
请参阅现场here，在那里可以通过devtools检查代码。
z9smfwbn1#
你有这个横幅，它是溢出视口：
这主要是由于具有静态宽度的内部元素：
因为你已经隐藏了所有的子元素直到md断点，你可以考虑隐藏这个父元素：
md
<div class="hidden md:flex w-80 flex-row justify-between lg:ml-20"> <h6 class="flex"><a href="/projects">Projects</a></h6> <h6 class="flex"><a href="/about">About us</a></h6> <h6 class="flex">Contact</h6> </div>
在这一点被改变之后，你仍然会得到一些溢出，这是由于这个元素：
这是由于w-96类的静态宽度。您可以考虑使用max-width来代替，以便它可以缩小：
w-96
max-width
<h1 class="mt-36 max-w-sm text-center text-5xl/tight font-normal md:mt-48 md:w-[46rem] md:text-8xl/tight">The Builder Of Opportunities</h1>
1条答案
按热度按时间z9smfwbn1#
你有这个横幅，它是溢出视口：
这主要是由于具有静态宽度的内部元素：
因为你已经隐藏了所有的子元素直到
md断点，你可以考虑隐藏这个父元素：在这一点被改变之后，你仍然会得到一些溢出，这是由于这个元素：
这是由于
w-96类的静态宽度。您可以考虑使用max-width来代替，以便它可以缩小：