-1

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

当浏览器处于全尺寸时，页面看起来很好。

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

页面的正常外观

这是缩小浏览器后的样子：

页面扭曲/凌乱的外观

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

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

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

我会很感激你的帮助。

编辑

我修复了侧边栏和深色内容空间的问题。我未能实现的是防止上层菜单（顶部导航）项目在屏幕变小时时掉落。

我只是将其更改为#sidebar：

width: 270px;

至

width: 19%;

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

4

4 回答 4

1

首先，你真的应该用你的问题来做一个Jsfiddle，就像单独使用 css 一样，我真的看不出发生了什么。

现在据我所知，您在某些元素中使用绝对值作为宽度。您应该看看使用 % 值。此外，您应该通过 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);
   ...
   ...
   }
于 2013-10-25T14:29:24.750 回答
1

嗨，我看到你的小提琴......有几个问题：

  • 第一个你设置的width% 这与浏览器的大小有关，你可以设置min-width并max-wdith避免这个问题。

  • 尝试在您的 html 中首先放入该框float:left和框之后float:right

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

使用您的 Fiddle 固定查看此演示http://jsfiddle.net/J3jm7/15/

于 2013-10-25T14:25:26.947 回答
0

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

于 2013-10-25T14:14:22.480 回答
0

看起来你是从一楼进来的。在这个领域入门的最佳资源是 Ethan Marcotte 的响应式网页设计。在这里查看：http ://www.abookapart.com/products/responsive-web-design

于 2013-10-25T14:16:04.137 回答