jquery - 网页在较小的分辨率下无法响应(仅由于文本溢出)

Question

我有:

• webpage
• CSS
• JS
• responsinator

当我以桌面分辨率打开网页时，调整大小不会弄乱页面，但是当涉及到尺寸小得多(宽度和高度低于 500 像素)的移动浏览器(如您在响应器中看到的那样)时，有如果我使用@media queries 减少字体，文本会溢出，这个问题太小而无法阅读。所以我结合使用了减少字体大小、增加文本容器大小和溢出:滚动到容器。但文本容器的高度仍然变得太小而无法放在 div#block2 中。

而且我必须对很多最大宽度使用大量@media 查询，因为在几个 window.width 范围内会发生困惑。那么使用大量@media 查询是否正常，或者我必须对我的代码进行重大更改。

一般而言，前端开发人员会做些什么来了解较小设备的响应能力，在这些设备中， block 包装器和横幅广告的行为与我们精心安排的一样完美，但文本和图像等内容是主要问题。

我在此网页上寻求一般帮助和特定解决方案的帮助。我对 Jquery、CSS @media 查询有一定的了解。

Answer 1

我在您的代码中看到的问题是您在文本包装器上设置了最大高度。这就是导致滚动条出现的原因。在我看来，当涉及到移动设备上的文本响应时，您必须允许文本按照它想要的自然方式进行换行。这通常意味着让段落变得又高又瘦。当涉及到小屏幕时，这只是一种你必须设计的东西。

你可以在主要断点处使用媒体查询； 768、640 和 480，以减小文本大小和填充，但就像你说的那样，在某个点上很难阅读。为了安全起见，我不会将字体大小降低到 14px 以下。

希望对您有所帮助。