使用 em 布局的 CSS 响应式设计答案

【问题标题】：CSS responsive design using em for the layout使用 em 布局的 CSS 响应式设计
【发布时间】：2019-10-01 04:17:03
【问题描述】：

我必须设计一个（响应式）网站，仅使用 HTML5、CSS3、弹性设计和 em 作为单位度量。我不知道如何在宽度和高度属性上应用 em，以使主包装器（即 div #page）的边距在所有方面都与实际屏幕尺寸相等。

我尝试了具有不同 em 值的宽度和高度属性，但这会导致边距不相等。我试图在 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/

【问题讨论】：

“我希望能够仅使用 em 作为度量单位，并且 #page 的边距与实际屏幕尺寸相等” - em 不是相对于屏幕尺寸开始。我无法理解您在这里要问什么。
我现在意识到我不够清楚，对此感到抱歉！我基本上想要的是使用 em 作为宽度和高度属性（例如宽度：Xem），并且仍然可以获得与使用百分比作为宽度和高度属性相同的结果。

标签： css layout responsive-design font-size

【解决方案1】：

您可以只使用 margin:0em auto 使 div 页面保持在中心。但不幸的是，您无法在中心设置高度。这里是制作宽度并保持在中心的小提琴。

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

JSfiddle

您可以使用填充来调整高度——但您不能让它对高度做出响应......到目前为止我知道。

【讨论】：

我现在意识到我不够清楚，对此感到抱歉！我基本上想要的是使用 em 作为宽度和高度属性（例如宽度：Xem），并且仍然可以获得与使用百分比作为宽度和高度属性相同的结果。

【解决方案2】：

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

使用fixed position 和auto margin 的组合就可以了。希望这会有所帮助！

【讨论】：