Question

所以我对HTML和CSS非常陌生，这是我尝试制作的第一个网站（因为他们付钱给我hahahaha，因为我父母的业务）。我只是想把它解决掉，所以我再也不用这样做了。）

所以这就是问题，请原谅我的英语，因为我不知道如何解决这个问题。当浏览器调整大小时，一切都会被压扁＆＃34;像这样： Before Resize 然后 After Resize

现在这又是我第一次也是最后一次这样做，所以不要判断我的艺术/编程。在HTML文档中，我只是将图像/文本放入，而在Main.css中，我做了以下几乎所有事情：

{position:absolute;
left: 50.5%;
top: 115px;
font-size: 40px;
color:aliceblue;
font-family:Courier New;
width: 16%;}


{Position:absolute;
left: 15.6%;
top: 300px;
width: 84%;}

现在我只想要一个固定页面。我尝试使用像素而不是百分比，它在我的1080p显示器上看起来很棒，但在720p显示器上看起来不太好，因为我必须向左滚动才能看到它。我知道我是个白痴，但请帮助我吗？

Answer 1

您必须使用responsive design。为此，您可以使用Twitter bootstrap或custom media queries。

Answer 2

尝试将height: auto添加到img选择器中，如下所示：

img.logo {
   position:absolute;
   left: 15.6%;
   top: 300px;
   width: 84%; 
   height: auto;
}

但是你会很快得到更多类似的情况，内容在不同的屏幕上无法正确呈现，所以你真的应该使用像Bootstrap这样的东西 - 这将节省你将来的大量时间。
尝试使用navbar进行导航，将jumbotrone与背景图片一起使用蜜蜂作为页面标题。

Answer 3

为了在不同的屏幕分辨率下获得相同的图像是棘手的，有各种可能性。

短文，使用 Picture tag

或尝试完整free online course, Udacity responsive images

最佳

对CSS很新，浏览器调整大小会导致失真

3 个答案: