Question

我必须设计一个（响应式）网站，仅使用HTML5，CSS3，弹性设计和em作为单位度量。我不知道如何将em应用于width和height属性，以使主包装（即div #page）的边距相对于实际屏幕尺寸在各面上均相等。

我尝试了使用不同em值的width和height属性，但这导致边距不相等。我试图找到em和％之间的某种转换，但是由于em是基于字体大小的，因此它始终是字体大小的百分比。我还试图将position属性应用于#page内的其他容器和元素。

<body>
    <div id="page">
        <header>
            <nav></nav>
        </header>
        <div id="content">
            <article></article>
            <article></article>
        </div>
        <aside></aside>
        <footer></footer>
    </div>
</body>


#page {
    position: relative;
    width: 90%;
    height: 90%;
    top: 1em;
    right: 1em;
    bottom: 1em;
    left: 1em;
}

我希望只能使用em作为度量单位，并且#page的边距与实际屏幕尺寸相等，但是宽度要么大于屏幕尺寸，要么右边距不等于其他边距。

这是我的完整代码的JSFiddle链接： https://jsfiddle.net/binaryglot/8dkn96g0/

Answer 1

您可以只使用margin：0em auto来使div页停留在中心。但不幸的是，您不能使中心高。在这里摆弄小提琴，并保持居中。

#page {
  position: relative;
  width: 90%;
  height: 90%;
  top: 1em;
  margin:0em auto;
  bottom: 1em;
}

JSfiddle

您可以使用填充来调整高度-但您无法使其对高度有反应...到目前为止，我知道。

Answer 2

    #page {
    position: fixed;
    width: 90%;
    height: 90%;
    top: 1em;
    right: 1em;
    bottom: 1em;
    left: 1em;
    margin: auto;
    }

结合使用fixed position和auto margin可以达到目的。希望这会有所帮助！

CSS响应式设计，使用em进行布局

2 个答案: