缩放网站宽度不失内容

垂直焦点

我有一个基本的网站有很长的多是文本内容：缩放网站宽度不失内容

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做到这一点？内容divs有独特的ID，单个div不是很长，所以我猜，至少在JS这应该有可能通过某种方式跟踪当前显示的ID？

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

谢谢。

来源

2013-04-20 Mikkå

我认为你应该做的是设置<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; 
}

我希望它按预期工作。

来源

2013-04-20 19:35:40

缩放网站宽度不失内容

回答

相关问题