请帮助我调整页面大小和灵活缩放答案

【问题标题】：Please help me with resizing and flexible scaling of my pages请帮助我调整页面大小和灵活缩放
【发布时间】：2014-01-09 03:51:04
【问题描述】：

我在这里绞尽脑汁，试图找到一种方法让我的 div 在页面调整大小时保持在一起。（我将页面上的所有彩色线条都设置为 div，除了底部的两条垂直线和一条长水平线。这是边框的一部分）。还可以让标题/菜单/页面其余部分保持连贯性。

非常感谢您一步一步进行，因为我对 html 和 css 还很陌生，而且我的网站已经上线。您可以在http://www.yamatat.com 上查看它以进行动手操作（而不是梳理我粘贴的代码/css）

我正在尝试将默认尺寸设置为 1366 x 768，因为这是目前全球份额最大的尺寸。

这是我的html：

    <title>You And Me And Thoughts And Talk with Doug Culp</title>
</head>
<div class="page-title-container">
    <div id="orangeone"></div>
    <div id="blueone"></div>
    <div class="page-title">YOU AND ME AND THOUGHTS AND TALK WITH DOUG CULP</div>
    <div id="orangetwo"></div>
    <div id="bluetwo"></div>
    <div id="bluethree"></div>
    <div id="bluefour"></div>
    <div id="bluefive"></div>
    <nav>
        <a id="home" class="menu" href="http://www.yamatat.com/index.html">HOME</a>
        <a id="podcast" class="menu" href="http://www.yamatat.com/podcast.html">PODCAST</a>
        <a id="media" class="menu" href="http://www.yamatat.com/media.html">MEDIA</a>
        <a id="blog" class="menu" href="http://www.yamatat.com/blog.html">BLOG</a>
        <a id="shows" class="menu" href="http://www.yamatat.com/shows.html">SHOWS</a>
    </nav>
</div>

<body>
    <h1 class="home_news"><span>NEWS STUFF//</span></h1>
    <div id="underline_news"></div>
    <div id="news"><span id="news_date">12/24/2013</span>
        <p>It's been a wild ride so far. I'm writing this before the site goes live. You guys don't even know!! I learned how to make my own page so that I could make it and put it out for you guys, the listeners. The YAMATATers. Scalloped, baked, french
            fried. Any way you want it, THAT's the way you need it. It's 5:20 am. I should really get to bed. Merry Christmas Eve everyone!!</p>
    </div>
    <a class="twitter-timeline" width="400" height="450" data-dnt="true" href="https://twitter.com/dougathan" data-widget-id="416479074542817280">Tweets by @dougathan</a>
    <script>
        ! function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0],
                p = /^http:/.test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + "://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, "script", "twitter-wjs");
    </script>

</body>

</html>

这是我的 CSS：

.page-title-container {
    min-width: 85.375em;
}

h1 {
    font-size: 60px;
    color: #00BFFF;
    text-align: center;
    border-width: 10px;
    border-radius: 6px;
    margin-left: 45px;
    margin-right: 45px;
    font-family: 'Dosis', sans-serif;
    padding-bottom: 0px;
    margin-top: -20px;
}

.page-title {
    font-size: 60px;
    color: #00BFFF;
    text-align: center;
    border-width: 10px;
    border-radius: 6px;
    margin-left: 238px;
    margin-right: 0px;
    font-family: 'Dosis', sans-serif;
    padding-bottom: -10px;
    padding-top: 25px;
    margin-top: -64px;
    border-style: solid solid solid solid;
    border-color: orange;
    width: 1410px;
    float: left;
    font-weight: bold;
    line-height: 55px;
}

a.menu:hover {
    color: orange;
}

a:hover {
    color: orange;
}

a:hover .body_link {
    color: orange;
    text-decoration: none;
}

#orangeone {
    height: 10px;
    width: 255px;
    border-radius: 6px;
    background-color: orange;
    float: left;
    margin-left: -8px;
    margin-top: -15px;
    position: relative;
}

#orangetwo {
    height: 10px;
    width: 255px;
    border-radius: 6px;
    background-color: orange;
    float: right;
    margin-right: 0px;
    margin-top: -61px;
    position: relative;
}

#orangethree {
    height: 62px;
    width: 10px;
    background-color: orange;
    float: left;
    margin-left: -5px;
    margin-top: 0px;
    border-radius: 6px;
    position: relative;
}

#orangefour {
    height: 62px;
    width: 10px;
    background-color: orange;
    float: right;
    margin-right: 0px;
    margin-top: 0px;
    border-radius: 6px;
    position: relative;
}

#orangefive {
    height: 10px;
    width: 1423px;
    background-color: orange;
    float: left;
    margin-left: 240px;
    margin-top: 0px;
    border-radius: 6px;
    position: relative;
}

#blueone {
    height: 10px;
    width: 240px;
    background-color: #00bfff;
    border-radius: 6px;
    margin-left: -8px;
    margin-top: 15px;
    position: relative;
}

#bluetwo {
    height: 10px;
    width: 245px;
    background-color: #00bfff;
    border-radius: 6px;
    margin-right: 0px;
    margin-top: -46px;
    float: right;
    position: relative;
}

#bluethree {
    height: 100px;
    width: 10px;
    background-color: #00bfff;
    float: left;
    margin-left: 222px;
    margin-top: -40px;
    border-radius: 6px;
    position: relative;
}

#bluefour {
    height: 100px;
    width: 10px;
    background-color: #00bfff;
    float: right;
    margin-right: 235px;
    margin-top: -40px;
    border-radius: 6px;
    position: relative;
}

#bluefive {
    height: 10px;
    width: 1460px;
    background-color: #00bfff;
    float: center;
    margin-left: 223px;
    border-radius: 6px;
    margin-top: 87px;
    position: relative;
}

a.menu {
    text-decoration: none;
    float: top;
    font-size: 46px;
    color: black;
    position: absolute;
    font-family: 'Dosis', sans-serif;
    margin-top: 0px;
}

#home {
    margin-top: -66px;
    margin-left: 400px;
}

#podcast {
    margin-top: -66px;
    margin-left: 600px;
}

#media {
    margin-top: -66px;
    margin-left: 890px;
}

#blog {
    margin-top: -66px;
    margin-left: 1125px;
}

#shows {
    margin-top: -66px;
    margin-left: 1350px;
}

.home_news, .home_pod {
    font-family: Tahoma;
    font-size: 55px;
    color: black;
    margin-top: 25px;
    border-bottom: solid 10px black;
    text-align: left;
    display: inline;
    border-radius: 0px;
    position: relative;
    margin-left: 40px;
}

.home_news span {
    position: relative;
    top: 12px;
}

.home_pod span {
    position: relative;
    top: 12px;
}

#news_date {
    float: left;
    font-weight: bold;
    font-size: 30px;
    margin-top: -20px;
    margin-left: 0px;
}

#news {
    float: left;
    font-size: 24px;
    margin-left: 40px;
    margin-top: 105px;
    width: 650px;
    white-space: normal;
    word-wrap: break-word;
}

.home_pod {
    position: relative;
    top: 12px;
    font-family: Tahoma;
    font-size: 55px;
    color: black;
    text-align: left;
    margin-left: 40px;
}

#pod_date {
    font-weight: bold;
    font-size: 30px;
}

#pod {
    font-size: 24px;
    margin-top: 105px;
    width: 650px;
    white-space: normal;
    word-wrap: break-word;
    margin-left: 45px;
}

.twitter-timeline {
    float: right;
    margin-right: 10px;
    margin-top: 25px;
}

a#Eegg_1 {
    float: left;
    margin-left: 35px;
    margin-top: -110px;
}

#Eegg_1_expl {
    float: left;
    color: black;
    display: block;
    margin-top: 155px;
    margin-left: -287px;
    font-size: 18px;
}

a#youtube_link {
    float: right;
    margin-right: 210px;
    margin-top: -5px;
}

a:hover #youtube_small {
    float: right;
}

#bloggy_head {
    float: left;
    text-decoration: none;
    margin-left: 800px;
    margin-top: 50px;
}

#bloggy_doit {
    float: left;
    font-family: Courier;
    font-size: 70px;
    margin-left: 745px;
    margin-top: 50px;
    font-weight: bold;
}

.body_link {
    color: black;
    text-decoration: none;
}

.home_shows {
    font-family: Tahoma;
    font-size: 55px;
    color: black;
    margin-top: 25px;
    float: left;
}

#underline_shows {
    height: 10px;
    width: 275px;
    background-color: black;
    float: left;
    margin-left: -323px;
    margin-top: 85px;
}

#show_calendar {
    float: left;
    font-size: 24px;
    margin-left: -320px;
    margin-top: 105px;
    width: 650px;
    white-space: normal;
    word-wrap: break-word;
}

【问题讨论】：

所有代码是重现您的问题所必需的吗？要经历很多事情。
@cimmanon 好点，对不起。我从 html 和 css 中取出了一些。还是新的，所以我不想拿出任何可能需要包装或类似的东西。
您想解决哪个问题？完全重新设计，只有导航，一些特殊的 div？（顺便说一句。我刚刚在最大化窗口中使用我的上网本 win7 chrome 31+ 分辨率 1366*768 查看了您的页面，我看不到整个标题。）
@winner_joiner 我希望页面在 1366 x 768 时居中，并在不中断大小调整过程的情况下放大和缩小
没有简单的解决方法。使用框架不会自动将您现有的非响应式代码变成漂亮的流动响应式站点。无论哪种方式，您都需要重建它。一个框架将教你如何使用基于百分比的设计、网格和媒体查询。所有这些在响应式设计中都很重要，而所有这些你都没有在你的设计中使用。如果我是你，我会从头开始考虑响应（而不是尝试添加它作为事后的想法）。

标签： html css resize scale scalability

【解决方案1】：

您可以通过使用图像的书挡设计来简单得多。

例如：

[书挡左图][标题+具有灵活宽度和背景的导航Div][书挡右图]

【讨论】：

我不知道该怎么做这样的事情。在这方面还是很新的。在线学习并在这里和那里获得帮助。