页面布局在不同的计算机上变得混乱，自动调整问题

Question

这可能有一个非常简单的解决方案，因为它是网页设计中最基本的东西之一。

经过大量研究但没有找到答案，决定提出来。基本上，我的网页在我的 13" Macbook 上看起来非常好，但是当我尝试在我的 27" 桌面上显示它时，所有元素都被弄乱了。我知道问题的核心是，当我将某些东西设置为 300px 时，它覆盖了 13 英寸的大部分屏幕，但只覆盖了 27 英寸的屏幕，因此导致所有东西都放在彼此之上，但我找不到解决方案.需要明确的是，这不是 100% 的响应问题，我不希望不同的屏幕有不同的布局，但我只是希望相同的布局在许多屏幕上看起来都不错，就像您从角落调整页面大小一样。这是一些我希望会有所帮助的代码。还有我尝试过的事情：

使用 em 代替 px。不是很有帮助。
使用 % 而不是 px。在父元素没有定义高度的第一个超大屏幕这样的情况下并没有多大帮助

HTML :

<body>
<div class="jumbotron">
    <img src="images/banner.jpg" >
</div>

<div id="menu"> 
        <ul  class="nav nav-pills navbar-left">
            <li> <p> 1 </p></li>
            <li> <p> 2 </p> </li>
            <li> <p> 3 </p></li>
            <li> <p> 4 </p></li>
        </ul>

        <ul class="nav nav-pills navbar-right">
            <li id="toleft"> <p> 5 </p> </li>
            <li> <p> 6  </p></li>
            <li> <p> 7 </p> </li>
            <li> <p> 8 </p> </li>
        </ul>
</div>

<!-- Script to fix navbar-->
<script>
    $(document).ready(function(){
        $(window).bind('scroll', function() {
            var navHeight = $( window ).height() - 450;
                if ($(window).scrollTop() > navHeight) {
                    $('#menu').addClass('fixed');
                }
                else {
                    $('#menu').removeClass('fixed');
                 }
            });
    });
</script>

<div id="displayframe">
    <div id="display">
        <img id="mainimage" src="images/col1.jpg" height="420" width="960" />
    </div>
</div>

<!-- Script for changing images with time-->
<script> 
    $(document).ready(function(){
        var imageArray = ["images/col2.jpg", "images/col3.jpg", "images/col4.jpg", "images/col5.jpg", "images/ban.jpg"];
        var count = 0;

            function loadImage(){
                $("#mainimage").attr("src", imageArray[count]);

                    if(count == imageArray.length){
                        count = 0;
                    }else{
                        count = count + 1;
                    }   
            }
            setInterval(function(){
                loadImage(); 
            }, 3000);
    })
</script>

<div class="container">
        <div id="head">
            <p> RECENT NEWS </p>
        </div>
</div> 


<div class="newsfeed">
    <ul>
        <li>
            <p style="float: left;"> <img src="images/chris.jpg" width="190px" /> </p>
            <h2></h2>
            <p id="bodypart">
            </p>
        </li>
        <li class="newselement"><p style="float: left;"> <img src="images/city.jpg" width="190px" height="280px" /> </p>
            <h2></h2>
            <p id="bodypart">
            </p></li>
        <li class="newselement"><p style="float: left;"> <img src="images/alex.jpg" width="190px" height="280px" /> </p>
            <h2></h2>
            <p id="bodypart">
            </p></li>
    </ul>
</div>

CSS:

body{
background-color: black !important;  
}

.jumbotron{
height: 320px;
background-color: black !important;  
}

.jumbotron > img{
width: 100%;
margin-top: -50px;

}

#toleft{
left: -10px;
position: relative;
}

.nav p{
font-family: "Crimson Text";
font-size: 28px;
font-weight: bold;
z-index: 2;
}

.navbar-left{
margin-left: 20px;
position: relative;
}

.navbar-left li{
width: 120px;
}

.navbar-right{
left: -50px;
margin-left: 0px;
position: relative;
}

.navbar-right li{
width: 140px;
}


#menu{
background-color: black;
width: 99%;
margin-top: -110px;
}

.nav li p{
padding-left: 15px;
}

.fixed {
position: fixed; 
top: 110px; 
height: 50px; 
z-index: 1;
background-color: black;
}

#display{
width: 960px;
height: 420px;
overflow: hidden;
margin: 30px auto 0px auto;
margin-top: 130px !important;
border-radius: 4px;
background-color: white;
} 

#display ul{
position: relative;
margin: 0;
padding: 0;
height:  960px;
width: 420px;
list-style: none;
}

#display ul li{
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 960px;
height: 420px;
}

#head > p{
font-family: "Crimson Text";
font-size: 30px; 
font-weight: bold;
}

#head{
margin-top: 30px;
margin-left: 85px;
}

.tweets{
background-color: rgba(247,12,12,0.3);
margin-top: -800px;
margin-right: 50px; 
border: 1px solid white;
border-color: white;
}

.newsfeed{
margin-left: 100px;
width: 60%;
height: 800px;
}

.newsfeed > ul{
list-style: none;
}

.newsfeed > img{
list-style: none;
display: inline-block;
position: absolute;
float: left;
}


.newsfeed > h2{
display: inline-block;
position: absolute;
margin-top: -50px;
margin-left: 50px;
float: right;
}

.newsfeed > li{
border-bottom: 1px white;
border-top: 1px white;
border-color: white;
height: 400px;
}

#bodypart{
font-size: 17px;
}

.newselement{
border-top: 1px solid white;
}

Answer 1

为什么要使用预先固定的Px（像素）？取而代之的是使用 %（百分比），它允许您根据用户的屏幕缩放网页。您可以将您的图像设置为 1600 像素宽，这将是您的 MBP 的全长，但是例如在您的 Imac 上它仅显示 1600 像素宽的图像，而实际上 Imac 的屏幕宽度为 2880 像素。因此，您还剩下 1280 像素需要填充。如果您要使用 100%，它将填充 100% 的屏幕正在查看您的网页的人。希望这有什么帮助。你在 300px 关闭时失去了我。

Answer 2

我已经设置了 JSfiddle here。

我发现了一些您可以 add/modify 帮助改进代码并使事情更好地对齐的事情。 <img src="images/banner.jpg" > 没有正确关闭您错过了 / <img src="images/banner.jpg" />。此外，您的代码中的任何地方都没有清除标记，因此当页面宽度向外扩展时，页面上的元素当然会相互堆叠。我创建了一个 class;

<div class="clear"/>
.clear{
    clear:both;
}

我把它放在每个元素部分的下面，这样它就会 return 它们到下一行。

接下来我在整个页面内容周围放置了一个包装器和一个内容 div 以使内容居中对齐并使页面宽度为 1000 像素（这是大多数网站的标准）。

图像没有渲染到 JSfiddle 中，因为路径是相对于您的计算机的，所以我将它们留空。如果你想看到它更好地工作，请更新 JSfiddle，我可以提供进一步的帮助。

-Epik

Answer 3

实际上这 responsive issue 只是因为您在不同的屏幕或分辨率上查看您的页面。因此，如果您想创建响应式网站，则必须为不同的分辨率添加 @media queries。 -- @media queries -- Outer div 应保持固定 (px) 或百分比 (%)。 -- 并且 inner div 或内容应根据外部 div 宽度换行，例如 (width:100%)。 -- 最后根据不同的分辨率改变你在@media 查询中的css。

页面布局在不同的计算机上变得混乱，自动调整问题

Page layout gets messed up in different computers, auto-adjustment issue

html

css

twitter-bootstrap