Device-independent 可读单列布局的宽度

Question

我想使用居中的 single-column HTML/CSS 类似于 Whosebug 的布局，用于桌面和移动用途，即截然不同的屏幕宽度和分辨率。我想避免必须使用代码（客户端或服务器）以不同方式检测和处理设备（即提供不同的布局/样式）。

布局

应该居中（目前使用居中 div 左右边距使用自动属性 - 这需要固定宽度）
宽度应根据设备屏幕宽度而变化，即在台式计算机上为舒适的列宽，但在移动设备上为全宽
将有 header 条在视觉上延伸到 window 边缘（与 Whosebug 的相同）和一个应该位于页面底部的页脚，即使内容不多（为此，CSS Single-column layout centered fixed-width 100% height w header and footer可能会有答案）

是否可以基于简单的居中 div 来实现，例如下面或者什么是 state-of-the-art？以下内容在 Android:

的 Firefox 上呈现得很小

#center {
  margin: 0 auto 0 auto;
  width: 10em;
  
  background-color: gray;
}

<div id="center">
Content div<br/>
<ul>
<li>should be centered</li>
<li>should be variable width depending on device screen width, i.e. a comfortable column width on desktop computer but full width on mobile</li>
<li>will have header bar that visually extends to the window edges and a have footer that should be at the bottom of the page, even if there's not much content (for this,  may have an answer)</li>
</ul>
</div>

请注意，我使用 10em 作为宽度（以使其适合代码段编辑器预览）- "absolute" 大小是否有更合适的单位或其他属性以确保可读性（和大小调整）在所有屏幕上？

桌面：

手机：

Answer 1

您找到的 awswer 已经给出了您应该为此使用什么的重要提示，即 display: flex;。在此提供的 fiddle 之上，您可以执行以下操作：

这为主要内容列提供了 100% 的宽度值以及最大宽度，比如说 768 像素。在此示例中，flex-grow:1; 用于完全填充高度，但对于您的项目而言可能不是必需的。

html, 
body {
height:100%; 
padding:0; 
margin:0; 
width:100%;
}
body {
display:flex; 
flex-direction:column;
}
#main {
flex-grow:1;
background:#f3f3f3;
max-width: 768px;
width:100%;
margin:auto;
}


header {min-height:50px; background:green;}
footer {min-height:50px; background:blue;}

<header>header</header>
<div id="main" role="main">content</div>
<footer>footer</footer>

Device-independent 可读单列布局的宽度

Device-independent width for readable single column layout

html

css

layout

responsive-design