Question

我正在自己的个人网站上工作，它目前正在播放，因此您可以查看它，甚至可以看到我想要解决的问题。

网站 - ＆gt; http://www.warrenbreedlove.com

我想要做的是让网页的右半部分以某种方式响应。左边的栏我需要始终保持这个大小，但社交媒体链接和投资组合页面我希望它有点缩放，具体取决于你查看它的大小监视器。

我认为最简单的方法是用firebug检查或检查

如果我将.container更改为80％而不是940px，它似乎在更大的更宽的显示器上工作，但随后在我的笔记本电脑屏幕上中断

.container { 
    position: relative; 
    width: 940px; 
    margin: 0 auto; 
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;    
    float: left;
    padding-left: 45px;

}

我希望投资组合区域也可以扩展，现在如果尺寸变得太小，它只会在左边的条件下发送它。（如果屏幕尺寸变小，显示的图像数量应该会在打破之前慢慢减少到可能是1或2）

我不确定在这里发布什么其他代码会影响类别/社交媒体和投资组合部分的宽度。

此过滤器部分仅适用于类别

 #filters {
   margin: ;
   padding: 0;
   list-style: none;
   border-bottom: solid 1px #dad8d6;
   width: 920px;
   padding-top: 5px;
 }

谢谢你！

Answer 1

像其他人一样，不要使用固定宽度值代替百分比。而且我也相信Bootstrap不是答案，我认为只有掌握了CSS才能让开发更快的人才能使用Bootstrap！

相反，要让您的网站响应：

将此元标记添加到<head>，这将使移动设备正确缩放屏幕

<meta name="viewport" content="width=device-width, initial-scale=1">

将此添加到您的global css，这将使基于百分比的元素更直观地使用填充调整大小。

html {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
}

其余的只是玩浮动，定位和百分比，直到你得到一些有用的东西！

以下是我为使您的布局工作所做的工作：

我已将#sidebar位置固定，因此它仍可与滚动条很好地配合使用，其余的只是添加一些百分比值（或删除固定宽度值）。

#sidebar {
    width: 270px;
    background-color: #fbfbfb;
    box-shadow: 0px 0px 1px #959595;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
}

.container {
    position: relative;
    padding-left: 286px;
}

#filters {
    padding: 0;
    list-style: none;
    border-bottom: solid 1px #dad8d6;
    padding-top: 5px;
}

Answer 2

使用可调整到视口的元标记也可以实现响应。此外，设置宽度：100％会使像素/固定值问题消失。您可能需要使用边距进行操作，但Bootstraps也可能是更好的解决方案。

Answer 3

这应该可以帮助您入门。

将您的CSS更改为：

＆＃13;

#filters {
  width: 100%;
}

.container {
  width: auto;
  position: absolute;
  left: 270px;
}

.sidebar {
  position: fixed;
}

＆＃13;

在媒体查询中将所有容器宽度更改为自动。

Answer 4

当您想要获得响应时，最好不要使用固定的宽度或高度。百分比是一个很好的方式。还有另一个提示，即20％+ 80％不等于100％。如果设置宽度为20％和80％的两个inline-block元素的属性，它将会中断。一个解决方案是一个是20％而另一个是78％。（这里，margin和padding没有考虑在内。）实际上，响应式设计是一个大问题，一个值得关注的领域。 Bootstrap为我们提供了出色的解决方案。你可以参考它。还有祝你好运。

使div保持屏幕大小的百分比

4 个答案: