前端 - 关于一个响应式的布局的问题？

Question

一个页面，一行放5个元素（横向布局）。
1，怎样让这些元素在页面尺寸不断变小的时候width不变，而之间的margin不断变小。
2，怎样让这些元素在页面尺寸不断变小的时候width变小，而之间的margin不变呢。

我以前都是百分比布局，不知这种效果该如何实现？

Answer 1

假設HTML如下：

<p class="container">
    <p></p>
    <p></p>
    <p></p>
</p>

對於1:

只要彈性盒就行了。 CSS如下：

.container {
    display: flex; /* 弹性盒，webkit私有属性的值是-webkit-flex */
    justify-content: space-around; /* 设置在子元素周围添加空白，webkit私有属性的名称是
                                      -webkit-justify-content，space-around是指
                                      在每个子元素两边添加一样的空白（和margin的效果类
                                      似），此外还有space-between（只在子元素之间添
                                      加空白，最两端的子元素外没有空白）、center（子元
                                      素居中）、flex-start（子元素左对齐，默认值）、
                                      flex-end（子元素右对齐） */
    flex-wrap: wrap; /* 设置父容器宽度不够时子元素的换行表现，webkit私有属性名称是
                        -webkit-flex-wrap，wrap表示换行，no-wrap表示不换行（默
                        认值），wrap-reverse表示换行但方向不同（从前往后，超出使先
                        从第一个元素之后换行） */
}
.container p {
    /* 子元素只要按照一般情况来设置就行了，不必特别添加display、float等属性 */
}

對於2：

普通地使用百分比就行了，除此之外還可以也可以使用上面說的彈性盒，只要在子元素上加上flex-grow或flex-shrink屬性就行了。具體請自行搜尋。

Answer 2

只能js監聽resize事件，重新設定他們的大小。

Answer 3

ABABA A定寬 B變寬 display:flex 這樣ABABA撐滿全屏 A不變 B可以動
1和2就是A和B怎麼用的吧
這樣行麼

Answer 4

有兩種方法
flex版面
百度比版面

Answer 5

absolute百分比定位

Answer 6

同樓上的js控制style
也可以用css media 控制

@media screen and (max-width: xxx px) {
  .selector{
    width:width；
    }
}

width 可以給一個最大值和最小值來固定。

Answer 7

calc 加百分比

Answer 8

css 中有
`
@media
//這樣的屬性
`
你可以去看看bootstrap 對應的實現，他是掐死了4個固定的大小，去改變的。不用做太小等級的縮小

Answer 9

可以試試rem

Answer 10

答案1：
思路在於給那5個元素，加上一個父級p，並設定p的寬度和margin:0 auto;

<style>
#container{
    width:980px;
    margin:0 auto;
    text-align:center;
}
.obj{
    display:inline-block;
    *zoom:1;
    *display:inline;
}
</style>
<p id="container">
    <p class="obj">obj</p>
    <p class="obj">obj</p>
    <p class="obj">obj</p>
    <p class="obj">obj</p>
    <p class="obj">obj</p>
</p>

答案2：
讓寬度不斷變化，就用百分比就可以了。