CSS非常新的浏览器调整大小会导致失真

Question

所以我对HTML和CSS非常陌生，这是我尝试制作的第一个网站（对于我的父母而言，因为他们付给我哈哈哈哈哈）。我只想解决这个问题，所以我再也不必做这样的事情了：）

所以这里是问题，请原谅我的英语，因为我不知道该如何工作。当浏览器调整大小时，一切都会像这样"压扁"：调整大小之前然后调整大小

之后

现在，这是我第一次也是最后一次这样做，所以不要判断我的艺术/编程。在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 One上看起来并不好，因为我必须向左滚动以查看所有内容。我知道我是个白痴，但是请帮我吗？

Answer 1

您必须使用响应式设计。为此，您可以使用Twitter Bootstrap或自定义媒体查询。

Answer 2

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

简短的文章，使用图片标签

或尝试此完整的免费在线课程，Udacity响应式图像

最佳

Answer 3

尝试将height: auto添加到您的img选择器，例如：

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

但是，您很快就会获得更多类似的情况，内容在不同的屏幕上无法正确渲染，因此您确实应该使用Bootstrap之类的东西 - 这将在将来节省很多时间。

尝试使用Navbar进行导航和带有背景图像的Jumbotrone，带有页面标题的蜜蜂。