2

我最近阅读了整个响应式网页设计主题，并决定尝试在我正在从事的项目中实施它。

问题是我使用 1280 宽度作为基点。

我使用的公式是

target ÷ context = desired width
target = element desired width 
context = my 1280 base point

每当浏览器调整大小时，布局就会中断，因为上下文不再是 1280 像素。我怎么能克服这个？（见下面的代码）

如果我将#wrap宽度设置为固定的 1280 像素；它不会取消响应效果吗？

<!doctype html>
<html>
<head>
<style type="text/css">

html {overflow-y: scroll; height:100%}

body {font:12px Arial, Helvetica, sans-serif; color: #616161; overflow:hidden; margin: 0; padding: 0; height: 100%; background-color: #eee}

#wrap {
    background-color: #eee;
    min-height: 100%;
    height:auto !important;
    height:100%;
    overflow: hidden !important; /* FF scroll-bar */ 
    width: 100%; 
}

#side-bar {
    width: 17.890625%;
    height:100vh;
    float:left;
    border-right: 1px solid #ccc;
    padding: 10px;
}

#main-section {
    float:left;
    background-color: #fff;
    width:80.46875%;
    height:100vh;
    overflow: scroll;
}


</style>
<body>

<div id="wrap">
 <div id="side-bar"></div> 
 <div id="main-section"></div>  
</div>

</body>
</html>
4

2 回答 2

1

缩放时不考虑边框和填充宽度。

如果将其添加到 CSS 中：

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

您的填充和边框宽度将包含在其中，x%并且您应该没有问题缩放。

你也可以像我上面那样添加所有元素，或者只是把它放在#side-bar. 我喜欢自始至终使用它，它使样式（尤其是响应式）更容易。

于 2013-08-09T17:01:23.600 回答
1

您可以设置 #wrap 与 max-width: 1280px;

#wrap {
   max-width: 1280px;
   width: 100%;
}
于 2013-08-09T17:51:51.890 回答