Question

我建了一个网站。我为所有div标签使用了液体布局。它的工作正常。我面临的问题是，当我将屏幕分辨率从1024 * 768降低到800 * 600时，文本大小不会减少;一个div中的文本与另一个div中的文本重叠。我在像素中提到了文本的大小。谁能告诉我如何解决这个问题。

Answer 1

文本大小不会随着容器的比例而减小。您可以在此容器上设置overflow: auto;，它会滚动内部的内容（当它不适合时），而不是让它重叠。

Answer 2

如果问题是你的文字没有缩小;只需添加一些JavaScript功能，以便在窗口缩小时减小文本大小。如果您必须为您的网站正常工作，那么，伙计，重新设计网站......

Answer 3

查看Javascript的window.screen usage;您应该能够检测到它们的分辨率，并执行一个函数来设置起始字体大小。我不是Javascript大师，但它看起来像......

document.onload = initTextSize;

function initTextSize() {
    var width = screen.width;
    var height = screen.height;

    if(width<=800 && height<=600) {
         document.getElementByTagName("head").innerHTML('<style type="text/css">body { font-size : 1em; }</style>');
    }
    else if(width<=1024 && height<=768) {
         document.getElementByTagName("head").innerHTML('<style type="text/css">body { font-size : 1.6em; }</style>');
    }

}

我知道你也可以使用开关/案例功能，但这只是我对你如何使用Javascript进行粗略估计。我认为innerHTML 替换内容（至少在某些浏览器中），而您希望将新内容附加到现有样式表中。

另外，您可能想要考虑屏幕尺寸的变化 - 或者谁知道...文档加载可能不是调用该函数的最佳方式，但这应该指向正确的方向。

网站布局问题

3 个答案: