Question

我有一个基本网站，文字内容非常长：

HTML简化如下：

<body>
<div class="content" id="01">
    <p>LONG TEXT</p>
</div>

<div class="content" id="02">
    <p>LONG TEXT</p>
</div>
</body>

同样还有大约40个id。

CSS会查找以下这些部分：

.content {
    max-width: 600px;
    min-width: 240px;
    margin: 0 auto;
}

因此，使用浏览器窗口/视口缩小内容div。这最终将我们带到了问题：

每当我缩小浏览器窗口的宽度时，内容div的宽度也会缩小，因此内容本身会变长，或者我应该说更高。这导致内容中的当前焦点向下移动的情况。特别糟糕的是，当移动设备从横向切换到纵向时，反之亦然。

我现在正在尝试寻找能够向上和向下缩放内容高度的解决方案，将当前垂直焦点保持在屏幕上。有没有人有任何想法如何在HTML，CSS或JS中完成？内容div有唯一的id，单个div不是很长，所以我想至少对JS这应该可以通过某种方式跟踪当前显示的id？

我希望我对此有所了解，而英语不是我的母语。

感谢。

Answer 1

我认为您应该做的是将<p>宽度设置为div.content的最小宽度，因此它永远不会改变它的宽度，但父<div>将根据目前的方向。

您可以在此处查看示例：http://jsfiddle.net/dyjXC/1/

CSS：

body{ width: 300px; } /* portrait or landscape */
div.content
{ 
    max-width: 600px; 
    min-width: 240px; 
    background: salmon; 
    border-bottom: 1px solid green;
}
div.content > p
{
    text-align: center; /* I centered both the text and... */
    margin: 0px auto;   /* ... the p itself, but you can use default to left */
    width: 240px; 
    background: lightgray;
}

我希望它按预期工作。

缩放网站宽度而不会丢失垂直焦点内容

1 个答案: