Question

我有一个包含内部div的包装器。我的目标是在不同的视口上显示不同的div。在比500px更小的视口上，他们应该占用width的整个100%并将其换行。在min: 500px和max: 768px的视口上，他们应该取行50%并再次换行（因此最多连续两个div）。在具有min: 1025px的视口上，它们应该具有整个行的1/3并且再次换行（因此连续最多三个div）。它们的右侧和底部也有一些空格用margin解决。

我的问题：是否可以从较低的媒体查询继承较大媒体查询的属性？如果您查看我的css，在第一次媒体查询(min: 500px and max: 768)中，他们第一次获得margin-right 36px。所有较宽视口中的margin-right应该相同。我的目标是，只需要更改width，它将采用最后设置在css中的margin-right，在这种情况下是来自最低媒体查询的margin-right。目前还没有工作。我必须重复自己，并在所有medie查询中使用相同的margin-right，而不是它的工作。遗传为什么不起作用？他还继承了所有包装器的显示特性而没有在每个媒体查询中设置它，为什么他还没有继承.wrapper { display: flex; flex-wrap: wrap; align-items: strech; border: 1px solid lightcoral; padding: 10px; } .wrapper__item { border: 3px solid black; width: 100%; margin-bottom: 10px; } .wrapper__item:last-child { margin-bottom: 0; } @media (min-width: 500px) and (max-width: 768px) { .wrapper__item { width: 47%; margin-right: 36px; margin-bottom: 36px; } .wrapper__item:nth-child(2n) { margin-right: 0; } } @media (min-width: 769px) and (max-width: 1024px) { .wrapper__item { width: 48%; } } @media (min-width: 1025px) { .wrapper__item { width: calc(100% / 3 - 24px); } .wrapper__item:nth-child(2n) { margin-right: 36px; } .wrapper__item:nth-child(3n) { margin-right: 0; } }？希望它足够清楚。

这里还有一个代码扩展，您可以轻松调整屏幕大小：https://codepen.io/STWebtastic/pen/zRvdEv

＆＃13;

<div class="wrapper">
  <div class="wrapper__item">Item 1</div>
  <div class="wrapper__item">Item 2</div>
  <div class="wrapper__item">Item 3</div>
</div>

＆＃13;

class User {} = 1.js
class Table {} = 2.js

＆＃13;

Answer 1

以下代码只是微调数字以正确定位：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: strech;
  border: 1px solid lightcoral;
  padding: 10px;
}

.wrapper__item {
  border: 3px solid black;
  width: 100%;
  margin-bottom: 10px;
}

.wrapper__item:last-child {
  margin-bottom: 0;
}

@media (min-width: 500px){ // Changed
  .wrapper__item {
    width: 40%; // Changed
    margin-right: 36px;
    margin-bottom: 36px;
  }
  // Changed
  .wrapper .wrapper__item:nth-child(2) {
    margin-right: 0;
  } // End Change
}

@media (min-width: 769px) { // Changed
  .wrapper__item {
    width: 48%;
  }
}

@media (min-width: 1025px) {
  .wrapper__item {
    width: calc(100% / 3 - 31px); // Changed
  }
  .wrapper__item:nth-child(2n) {
    margin-right: 36px;
  }

  .wrapper__item:nth-child(3n) {
    margin-right: 0;
  }
}

确保为每个viewport

的每个元素分配足够的空间

从较低媒体查询继承属性

1 个答案: