Question

以下是codepen中我当前的网站布局。

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

我感谢，建议或帮助，我提前感谢您的努力。：）

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以满足移动布局 - 使用最小宽度断点（大约320px宽开始），然后随着显示视口变大 - 您“增强”布局。

您目前拥有的是如何不接近它的现代示例，主要是用于更新旧网站的技术。它也被称为“优雅降级”，通常由最大宽度断点1280px到980px控制开始，并且需要最终移除或移出视口外的元素以避免碰撞或缺少空间。

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

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

尝试稍微修改一下代码，然后让我们看看你给我的建议可以做些什么。然后，我会把你的笔分开，我们可以更进一步。

响应式Web布局（无标题）

1 个答案: