<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
フレックスを使用して、両側に固定幅の3列レイアウトと、自己適応型の中央列を実装します。
<style>
html {
font-size: 10px;
}
.box {
display: flex;
height: 10rem;
}
.box div:nth-child(1) {
/* flex 0 0 5rem 让其不能伸展或者缩放 宽度固定在5rem */
flex: 0 0 5rem;
background: #A0EEE1;
}
.box div:nth-child(2) {
/* flex 1 1 auto 让其能伸展或者缩放 宽度自适应 */
flex: 1 1 auto;
background: #E6CEAC;
}
.box div:nth-child(3) {
/* flex 0 0 10rem 让其不能伸展或者缩放 宽度固定在10rem */
flex: 0 0 10rem;
background: #F4606C;
}
</style>
メディアクエリを追加して、画面の幅に応じて色を変更します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式3栏布局</title>
<style>
html {
font-size: 10px;
}
.box {
display: flex;
height: 10rem;
}
.box div:nth-child(1) {
flex: 0 0 5rem;
background: #A0EEE1;
}
.box div:nth-child(2) {
flex: 1 1 auto;
background: #E6CEAC;
}
.box div:nth-child(3) {
flex: 0 0 10rem;
background: #F4606C;
}
@media (min-device-width: 400px) and (max-device-width: 500px) {
.box div:nth-child(2) {
background: #66B3FF;
}
}
@media (min-device-width: 501px) and (max-device-width: 700px) {
.box div:nth-child(2) {
background: #FF5809;
}
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>