响应式网页布局（无标题）

Question

这是我当前的网站布局，codepen。

如果窗口被调整大小，它不会将文本从主导航推过去，用 css 对此进行编码会是一种更具响应性的方式。另外，在不使用填充的情况下，为相同的布局编写 css 的更好方法是什么？我编码它的方式似乎效率低下。我正在使用媒体查询在 480 像素以下时隐藏标题并显示我的移动菜单触发器，所以不用担心。只是想知道创建此布局的更好、响应速度更快的方法是什么。

感谢您的建议或帮助，并提前感谢您的努力。 :)

HTML：

<div class="site-header">
<ul class="main-navigation"><li><a href="#">Overview</a>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<div class="content">

<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>

CSS：

.site-header {
    display: inline-block;
    top: 0;
    left: 0;
    right: 0;
    width: 14%;
    height: 100%;
    float: left;
    text-align: right;
    position: fixed;
    z-index: 1;
    // border: 1px solid green;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
}

.main-navigation {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    cursor: default;
    // border: 1px solid red;
    list-style-type: none;
 }

 .content {
    position: relative;
    float: right;
    // border: 1px solid yellow;
    word-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    width: 86%;
    overflow: hidden;
    padding-right: 10%;
    padding-left: 10%;
}

Answer 1

好吧，我喜欢看到这种类型的问题，因为这意味着你足够关心问......所以，这是你的第一课。

您的 CSS 似乎发生了太多事情。了解响应式布局最重要的一点是 CSS 应始终“移动优先”。这被称为“渐进增强”。您主要编写 CSS 来迎合移动布局 - 使用最小宽度断点（开始时大约 320 像素宽），然后随着显示视口变大 - 您“增强”布局。

您目前拥有的是如何不使用它的现代示例，主要是用于更新旧网站的技术。它也被称为“Graceful Degradation”，通常由 1280px 到 980px 的最大宽度断点控制以启动，并且需要最终将元素移除或移动到视口之外以避免碰撞或空间不足。

移动优先方法的好处是您处理的“杂乱”更少 - 正确利用您的空间，然后添加并重新对齐特定元素以利用该空间。此外，您还可以将 CSS 压缩到一定程度，使其保持干燥（代表“不要重复自己”）。

看看你的布局，它没有太多意义。如果有的话，您会希望人们在向他们展示内容之前拥有浏览网站所需的一切。

试着稍微修正一下代码，看看你能用我给你的建议做什么。然后，我会叉你的笔，我们可以更进一步。