Question

我是Web开发的新手，也是Stackoverflow的新手。我不得不改变width以使其响应。
下面，我有一个这个例子，意在解释财产background-blend-mode。在我完成它之后，我想用它作为以前课程的复习。我想对其进行样式设置，使其在更改max和min width属性方面具有响应性。

＆＃13;

div {
  width: 280px;
  height: 140px;
  padding: 30px;
  margin: 10px;
  display: inline-block;
  background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
  background-size: contain;
}

.multiply {
  background-blend-mode: multiply;
}

＆＃13;

<html>
<div>
</div>
<div class="multiply">
</div>
</html>

＆＃13;

当视口的宽度（在Chrome上）变为小于 740px时，div会显示为block元素。当我使用box-sizing属性将其值设置为border-box时，它将断点更改为620px而不是740px，这意味着620px以下的任何width都会生成div仍然显示为block个元素。

我坚持的是为这些div设置响应视口，因此无论视口的宽度是什么，它们始终显示为inline个元素。

谢谢

Answer 1

试试吧。我已经添加了一些用于响应的CSS和媒体查询。

* {
  padding:0;
  margin:0;
  list-style:none;
}
html {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -moz-box-sizing: inherit;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.common {
  width: 340px;
  height: 200px;
  padding: 30px;
  margin: 10px;
  display: inline-block;
  background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
  background-size: contain;
}

.multiply {
  background-blend-mode: multiply;
}
@media screen and (max-width:767px){
  .common{
    width:45%;
    height:auto;
    margin: 10px auto 10px;
    padding: 14%;
  }
  .wrap{
    text-align:center;
  }
}

<html>
  <div class="wrap">
    <div class="common"></div>
    <div class="common multiply"></div>
  </div>
</html>

Answer 2

您想要什么样的响应？响应真的只是意味着响应 - 屏幕尺寸。所以行为真的取决于你。从我看到你有两个选择。

响应宽度。这意味着当您缩小到小于两个块大小时，它们仅向下缩小宽度。要实现此目的，您可以将max-width设置为280px，因为您有两个对象要将宽度设置为50%。这个问题在某种程度上你会得到非常狭窄的块。

div {
  max-width: 280px;
  height: 140px;
  padding: 30px;
  margin: 10px;
  display: inline-block;
  background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
  background-size: contain;
  width: 50%;
}

.multiply {
  background-blend-mode: multiply;
}

https://jsfiddle.net/6fjcoxmt/4/

响应方面广播。另一种选择是保持纵横比，您需要使用具有保持父纵横比的伪元素的技术。你仍然需要使用1中的技术，但它会变得有点复杂。元素的包装器需要控制宽高比。

<div>
  <div class="inner"></div>
</div>
<div class="multiply">
  <div class="inner"></div>
</div>

现在注意.inner是您之前元素的视觉效果，而父div将专注于控制高宽比：

div {
  display: inline-block;
  margin: 10px;
  max-width: 280px;
  position: relative;
  width: 50%;
}

div:after {
  content: "";
  display: block;
  padding-bottom: 58.8%;
}

.multiply .inner {
  background-blend-mode: multiply;
}

.inner {
  background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center center;
  background-size: contain;
  bottom: 0px;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0px;
  width: 100%;
}

https://jsfiddle.net/6fjcoxmt/16/

如何使这些div响应

2 个答案: