当浏览器改变大小时，网页会变得混乱

Question

我不是一个非常有才华的网页设计师，所以当浏览器改变其大小时，我很难让我的网页保持畅销。它变得一团糟，看起来很糟糕。

当浏览器达到完整尺寸时，页面看起来很好。

这是重新调整浏览器大小之前的样子：

这就是浏览器缩小后的看法：

仅当您水平调整浏览器大小时才会发生这种情况。

这是我的CSS：http://pastebin.com/SfKT0Eth

我无法弄清楚我的错误，因为我不是很擅长HTML / CSS。这不是我的领域，所以我缺乏自己解决这个问题的知识。

感谢您的帮助。

修改

我用侧边栏和黑暗内容空间修复了问题。 我未能实现的是在屏幕变小时阻止上方菜单（top-nav）项目下降。

我只是在#sidebar中更改了此内容：

width: 270px;

到

width: 19%;

http://jsfiddle.net/J3jm7/3/

Answer 1

嗨，我只看到你的小提琴......有一些问题：

• 您使用％width设置的第一个值与浏览器尺寸相关，您可以设置min-width和max-wdith以避免此问题。< / p>

• 尝试在您的html中首先放置float:left框并在框float:right

之后

• 我不明白你为什么使用postion:absolute作为外部div。

使用您的小提琴修复 http://jsfiddle.net/J3jm7/15/

查看此演示

Answer 2

首先你应该用{c}单独用css制作一个Jsfiddle我真的不知道发生了什么。

现在我可以看到你在某些元素中使用宽度的绝对值。您应该看一下使用％值。您还应该通过css查看媒体查询。例如，当浏览器的宽度非常小时，如果隐藏侧栏或位于主窗口下方，则侧栏会更好。

你可以通过使用像

这样的东西来实现这样的目标

@media screen and (max-width: 800px){
    #sidebar {
        display:none;
    }

如果浏览器窗口的大小调整为800px以下，则会隐藏侧边栏 或

@media screen and (max-width: 800px){
    #sidebar {
        float:none;
        width:100%
    }

如果浏览器窗口调整大小低于800px宽度，这将使侧边栏位于主窗口下方并将其大小调整为其父元素的整个宽度

媒体查询当然应该与你的其他css共存

---

啊，我看到你添加了一个小提琴。好吧，如果你想让你的侧边栏保持270px的宽度，你可以使用容器

.container {
   width: calc(100% - 275px);
   ...
   ...
   }

Answer 3

非常简单地说，如果没有登台URL，很难调试。无论如何，您的问题是因为您没有使用流体开发实践。也许试着谷歌如何开发流体开发。想法是使用％和em以及基本css字体大小。另外，你可能想看看bootstrap3。

Answer 4

看起来你是在一楼进来的。入门这个领域的最佳资源是Ethan Marcotte的Responsive Web Design。请在此处查看：http://www.abookapart.com/products/responsive-web-design