-1
问题是我无法将框的大小调整为50％，它们只是保持全宽。如何将div的大小调整为50％
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Mobile Styles */
@media only screen and (max-width: 400px) {
body {
background-color: #F09A9D;
/* Red */
}
}
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
.sign-up,
.feature-1,
.feature-2,
.feature-3 {
width: 50%;
}
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
body {
background-color: #B2D6FF;
/* Blue */
}
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
background-color: #5995DA;
height: 80px;
}
.header {
background-color: #B2D6FF;
}
.content {
background-color: #EAEDF0;
height: 600px;
}
.sign-up {
background-color: #D6E9FE;
}
.feature-1 {
background-color: #F5CF8E;
}
.feature-2 {
background-color: #F09A9D;
}
.feature-3 {
background-color: #C8C6FA;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Responsive Design</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page">
<div class="section menu"></div>
<div class="section header">
<img src="images/header.svg" />
</div>
<div class="section content">
<img src="images/content.svg" />
</div>
<div class="section sign-up">
<img src="images/sign-up.svg" />
</div>
<div class="section feature-1">
<img src="images/feature.svg" />
</div>
<div class="section feature-2">
<img src="images/feature.svg" />
</div>
<div class="section feature-3">
<img src="images/feature.svg" />
</div>
</div>
</body>
</html>
可以你给什么ü要实现屏幕截图？ –
不确定没有工作示例，但尝试添加“flex：1 1 50％;”以及平板电脑风格的最小/最大宽度为50％。 – niorad