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

标签 jquery html css

我有:

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

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

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

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

最佳答案

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

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

希望对您有所帮助。

关于jquery - 网页在较小的分辨率下无法响应(仅由于文本溢出),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22801134/

相关文章:

javascript - 在javascript中显示手机上的虚拟键盘

html - 如何让我的 parent 永远保持圆形?

html - 如何在当前媒体查询之前正确覆盖为媒体查询定义的样式?

CSS3 : Hover effect with opacity on div's and text

javascript - UnicodeEncodeError at/notifications/ajax/'ascii' codec can't encode character : ordinal not in range(128)

javascript - 将浏览器位置聚焦在切换 block 上

Javascript Clonenode() - 通过 id 获取元素?

jquery - 检索最后已知的地理位置 - Phonegap

css - 为表格相关的 HTML 标签调整 CSS

javascript - Safari 上页面加载时固定标题下的内容 "slides"损坏