我的网页在改变窗口大小时搞砸了

Question

我尝试在不同的屏幕上看到我的网站时，我很难移动。它似乎在移动屏幕上然后在计算机屏幕上更加混乱。这是我的代码。

innerHTML

这是预期的输出。

Answer 1

你问的问题没有一个简单的答案。响应式设计是您所要求的。一些帮助不同屏幕尺寸的快速建议是使用百分比而不是px，并使用max-width和max-height。谷歌响应式设计，你会发现很多资源来帮助解决你的问题。

Answer 2

嗯，是的。例如：

 #logo img {
   width: 120px;
   margin-top: 20px;
   margin-left:350px;
 }

你可能在屏幕上做了这个，看起来还不错。但是一旦你移动到更大/更小的屏幕，那些120px可能意味着完全不同的东西。您有两种选择：1）使用媒体查询并尝试尽可能多地覆盖屏幕分辨率。 2）使用一些几乎已经解决的框架。

选项1将需要相当多的工作。选项2将更容易，但您仍需要学习框架。我推荐Bootstrap：http://getbootstrap.com/

不在一边，使用百分比（％）而不是像素会有所帮助。不能保证它看起来不错，但它会比像素更糟糕。