1

介绍

我正在做一个具有流畅布局的网站（所有容器宽度都以 % 表示）以适应所有分辨率。没关系，在小分辨率、宽 imac 屏幕、平板电脑和手机的浏览器中看起来不错。

布局

它有一些列，它是一个 1200px 页面的想法。布局是这样的：

在此处输入图像描述

问题

但我对标题高度有疑问。现在它是固定的：

#title {
    padding-top: 135px;
}

我想在分辨率的基础上改变标题高度，但我不知道如何解决它。

如果我使用百分比作为高度，则不清楚它是如何计算的。我应该使用html, body { height: 100%; }但如果内容从一页到另一页不同怎么办？如果内容溢出视口？

4

2 回答 2

1

我用一些javascript和jquery做到了：

    function resizeTitle() {
        var width = $(window).width();
        var h = width;
        $("header").css("height", h/8+"px");
        $("header #title").css("padding-top", h/14+"px");
    }
    $(window).resize(resizeTitle);
    resizeTitle();
于 2012-12-27T08:10:59.277 回答
1

我不知道为什么 % 值不适用于高度或其他垂直属性。

我所做的是使用媒体查询。

前任：

#title {
padding-top: 135px;
}
@media screen and (max-width=600px)
    #title {
    padding-top: 100px
    }
}

依此类推，适用于每个屏幕尺寸。

您可以使用 webdeveloper 工具栏之类的工具来查看它在多种屏幕分辨率下的显示方式

于 2012-12-22T13:11:13.200 回答