Question

我最近阅读了整个响应式网页设计主题，并已决定尝试在我正在开发的项目上实现它。

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

我正在使用的公式是

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

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

如果我将#wrap宽度设置为固定的1280px;不会取消响应性实现

<!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>

Answer 1

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

如果将其添加到CSS中：

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

您的填充和边框宽度将作为x%的一部分包含在内，您可以毫无问题地进行缩放。

您也可以像上面所做的那样添加所有元素，或者只是将它放在#side-bar上。我喜欢在整个过程中使用它，它使样式（特别是响应性）更容易。

Answer 2

您可以使用max-width设置#wrap：1280px;

#wrap {
   max-width: 1280px;
   width: 100%;
}

响应式网页设计100％包装

2 个答案: