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.
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
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
Assume the HTML is as follows:
For 1:
Just a flexbox. The CSS is as follows:
For 2:
Just use percentages normally. In addition, you can also use the flexible box mentioned above. Just add the
flex-grow
orflex-shrink
attribute to the child element. Please search for details yourself.Only js can listen to the resize event and reset their size.
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
There are two ways
flex layout
Baidu layout
absolute percentage positioning
The same js control style as above
can also be controlled with css media
width can be fixed by giving a maximum and minimum value.
calc plus percentage
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
You can try rem
Answer 1:
The idea is to add a parent p to those 5 elements, and set the width and margin of p: 0 auto;
Answer 2:
To keep the width changing, just use percentages.