Question

我想做一个网页设计，它包含一个浮动的流体布局，包含在背景图像上的2个div：主要内容布局居中，菜单1重叠但相对定位在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;       
}

我的态度好吗？

编辑：没有必要真正解决它，只是指定我，如果我采取良好的方法（互联网上的所有例子我发现流体布局是多列，少数不是，不要使用中央面板（如果你知道一些资源就足够了！）。谢谢！

Answer 1

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

阅读更多：Mozilla Developer's : Media Queries - CSS Tricks : Media Queries

编辑：CSS Tricks也是一个响应式布局，可以在浏览器窗口中进行测试。

Answer 2

虽然使用百分比是基本的（但不是必需的）以产生良好的响应式布局，但如果media queries明确指出really want the content to fit virtually any screen。

您还应该开始在em中考虑layout和text。

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

====================
     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... */
    }
}

......等等。百分比是可以的，但并不是那么简单。

流畅的CSS布局，一个大的居中div在背景

2 个答案: