Question

问题是我无法将框调整为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>

Answer 1

与班级feature划分的另一个班级名为section，我看到你已经提到段的宽度为100％，这就是它占据整个宽度的原因，甚至在提到要素类的宽度为50％之后。

您可以删除媒体屏幕中各部分的宽度属性，并将要素类设置为宽度为50％，或者在媒体屏幕中将节类别设置为50％的宽度

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Mobile Styles */

@media only screen and (max-width: 400px) {
  body {
    background-color: #F09A9D;
    width: 100%!important;
    /* 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%; this is overriding your feature class properties*/
  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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

移动媒体查询，使其在 .section之后显示为。否则，你要压倒它们。

* { margin: 0; padding: 0; box-sizing: border-box; } .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; } /* 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 */ } }

<!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>

如何将div调整为50％

2 个答案: