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

Question

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

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

Answer 1

Assume the HTML is as follows:

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

For 1:

Just a flexbox. The CSS is as follows:

.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等属性 */
}

For 2:

Just use percentages normally. In addition, you can also use the flexible box mentioned above. Just add the flex-grow or flex-shrink attribute to the child element. Please search for details yourself.

Answer 2

Only js can listen to the resize event and reset their size.

Answer 3

ABABA A fixed width B variable width display:flex This way ABABA fills the full screen A remains unchanged B can move
1 and 2 are how to use A and B
Is this okay

Answer 4

There are two ways
flex layout
Baidu layout

Answer 5

absolute percentage positioning

Answer 6

The same js control style as above
can also be controlled with css media

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

width can be fixed by giving a maximum and minimum value.

Answer 7

calc plus percentage

Answer 8

There are attributes like
`
@media
// in
`
. You can check out the corresponding implementation of bootstrap. It strangles 4 fixed sizes. , to change. No need to do too small a level of reduction

Answer 9

You can try rem

Answer 10

Answer 1:
The idea is to add a parent p to those 5 elements, and set the width and margin of p: 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>

Answer 2:
To keep the width changing, just use percentages.