2

我想做一个网页设计，它包含一个浮动的流体布局，由背景图像上的 2 个 div 组成：一个居中的主要内容布局和一个重叠但相对位于 te 内容 div 左侧部分的菜单。

我怎样才能让它如此流畅并在任何分辨率下都可以看到？你推荐我哪个最小/最大宽度？

browser window -> 100%
====================
     backgrnd      |
   -------------   |
   |           |   |
 |--|          |   |
 |M | content  |   |
 |__|          |   |
   |-----------|   |
   |__footer___|   |
___________________|


body {
    margin:0; 
    padding:80px; 
    color:yellow; 
    background: url('image.jpg') no-repeat center center fixed; background-size: cover;
    font-size: 65%; 
}

背景应始终占据屏幕

.centraldiv {
    max-width: 1000px;
    min-width: 775px;
    width: 90%;
    padding: 80px;
}

.menudiv {
    position: relative?
    width: 100px;       
}

我会走好路吗？

编辑：不需要实际解决它，只要我假设好的方法就任命我（我在互联网上找到的流体布局的所有示例都是多列的，而少数不是，根本不使用中央面板（如果你知道一些资源就够了！）。谢谢！

4

2 回答 2

2

关于媒体查询的评论是要走的路。在您的示例中，您设置了宽度、最小宽度和最大宽度，这也是不正确的。为超过 1280 像素的任何内容设置桌面版本，仅使用 % 宽度。然后开始为低于您所需桌面宽度的任何内容覆盖媒体查询，因此可能低于 900 像素，然后在该点将其降低。

阅读更多：Mozilla 开发人员的：媒体查询- CSS 技巧：媒体查询

编辑：CSS Tricks 也是一种响应式布局，请使用浏览器窗口进行测试。

于 2012-10-18T13:43:14.627 回答
2

虽然使用百分比是生成良好响应式布局的基本（但不是必需的），但如果您真的希望内容几乎适合任何屏幕，则肯定会指示媒体查询。

您还应该开始考虑ems 中的布局和文本。

通常，您应该从一个简单的布局开始，其中每个内容块都填充窗口的宽度：智能手机上的 100 像素菜单将占据大约三分之一的屏幕！

====================
     backgrnd      |
   -------------   |
   |   menu    |   |
   |-----------|   |
   |           |   |
   |  content  |   |
   |           |   |
   |-----------|   |
   |__footer___|   |
___________________|

只需将它们保持在display:block;：

body {
    font-size: 62.5%; /* 62.5% = ~10px = 1em */
    margin:0; 
    padding:8em; 
    color:yellow; 
    background: url('image.jpg') no-repeat center center fixed; background-size: cover;
}
#centraldiv, #menudiv {
    padding:2em 0;
}

然后，玩弄浏览器窗口，直到找到一个有足够水平空间将菜单向左移动的点：

@media screen and (min-width:40em){
    #centraldiv {
        width:90%;
    }
    #menudiv {
        float:left;
        /* etc... */
    }
}

...等等。百分比没问题，但没那么简单。

于 2012-10-18T13:59:37.553 回答