什么时候使用像素与百分比的CSS布局（特别是重新调整大小窗口）？

Question

我最近的问题是我的网站在浏览器完全屏蔽时看起来很好，但是当它变小时看起来非常糟糕。我的设计是通过使它看起来很好而全屏，所以我不知道该做什么来确保当窗口大小不同时它看起来也会很好。

以下是我目前正在进行的工作（全屏）：

当浏览器占我的屏幕宽度的一半时，这是同一页面：

显然，全屏时看起来很整洁。

我的问题是：如何从一开始就启动网站时提前解决这些问题？我何时使用像素与百分比？

我知道媒体查询，但我觉得我必须添加一堆，以确保无论窗口大小是多少，这个网站总是看起来很好。这只是Web开发人员必须做的事情吗？还有更好的方法吗？

只是为了衡量，这里是这三个div的HTML：

<div id="wrap">
    <div id="header">
        <h1>
            HEADER
        </h1>
    </div>

    <div id="encomp">
        <div id="sidebar">
            <h2>
                Sidebar
            </h2>

            <ul>
                <li><a href="#">Item 1</a>
                <li><a href="#">Item 2</a>
                <li><a href="#">Item 3</a>
                <li><a href="#">Item 4</a>
                <li><a href="#">Item 5</a>
                <li><a href="#">Item 6</a>
        </div>

        <div id="main">
            MAIN CONTENT
        </div>
    </div>
</div>

这是CSS：

#header {
background-color: #cb2424; 
font-size: 50px; 
text-align: center;
width: 70%;
margin: auto;
border-radius: 10px;
letter-spacing: .75em;}

#header h1 {
color: white;
text-align: center;
width: 100%;}

#sidebar { 
float: left; 
width: 200px; 
background-color: #cb2424; 
min-height: 400px;
margin: 0 35px 35px;
border-radius: 10px;
text-align: center;
padding: 0;}

#main {
background: blue;
min-height: 400px;
margin: 0 auto;
width: 70%;
border-radius: 10px;}

我相信我已经包含了所有必要的代码。我遗漏了侧边栏代码的一些内部工作原理，所以我不会比现有的更加混乱，但如果需要更多信息，请告诉我。

此外，如果任何人有任何可以更好地学习CSS布局的文章的链接，我将非常感激。

谢谢！