縮放網站寬度不失內容

垂直焦點

我有一個基本的網站有很長的多是文本內容：縮放網站寬度不失內容

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

縮放網站寬度不失內容

回答

相關問題