html - 如何使 flex 响应

Question

我正在使用 flex，以便两个内部 div(s) 高度保持不变。但我面临的问题是，设计没有响应。在全宽窗口中它看起来很完美，但是当我们在移动设备中查看它时它会试图压缩内容。

如何解决这个问题？

有没有其他方法可以让两个并排的 div 的高度相同？ (数据是动态的，所以我不能为任何 div 设置高度属性)

我的 fiddle 链接:link

.image-bg-fluid-height {
  background-color: black;
  padding: 51px 0 0 0;
}

.image-bg-fluid-height,
.image-bg-fixed-height {
  /*text-align: center;*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.gradient-background {
  background: #00BCD4;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #B2EBF2, #80DEEA, #4DD0E1, #00BCD4);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(left, #B2EBF2, #80DEEA, #4DD0E1, #00BCD4);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(left, #B2EBF2, #80DEEA, #4DD0E1, #00BCD4);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #B2EBF2, #80DEEA, #4DD0E1, #00BCD4);
  /* Standard syntax (must be last) */
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

.icon.default-bg {
  background-color: white;
  color: #ffffff;
}

.default-bg {
  background-color: #09afdf;
  color: #ffffff;
}

.icon {
  display: inline-block;
  text-align: center;
  position: relative;
  background-color: rgba(255, 255, 255, 0.85);
  color: #000;
  font-size: 24px;
  width: 150px;
  height: 150px;
  line-height: 58px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 40px;
  border: 1px solid transparent;
}

.default-bg {
  background-color: #09afdf;
  color: #ffffff;
}

.feature-box {
  margin-bottom: 50px;
  margin-top: 50px;
}

.tech-button {
  color: white !important;
  background-color: #00ACC1;
  border-color: #00ACC1;
}

.tech-button:hover {
  color: black !important;
  background-color: white;
}

.tech-button:active {
  color: black !important;
  background-color: white;
}

.tech-button:target {
  color: black !important;
  background-color: white;
}

.tech-button:focus {
  color: black !important;
  background-color: white;
}

.table > thead > tr > th {
  border-bottom: none !important;
}

.table > tbody > tr > td {
  border-top: none !important;
}

.box-title {
  background-color: #00BCD4;
  padding: 15px;
  color: white;
}

.web-icon {
  display: inline-block;
  text-align: center;
  position: relative;
  background-color: white;
  color: #000;
  font-size: 24px;
  width: 150px;
  height: 150px;
  line-height: 15px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  /*-webkit-border-radius: 5px;*/
  /*-moz-border-radius: 5px;*/
  /*border-radius: 40px;*/
  border: 1px solid transparent;
}

.signup-button:hover {
  background-color: white;
  color: #00BCD4;
}

.text-color {
  color: white;
}

.tld-span {
  padding: 10px 30px 10px 10px;
  background-color: #0097A7;
  color: white;
  -webkit-clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
}

.tld-span > a {
  color: white;
}

.tld-span > a:hover {
  text-decoration: none;
}

.manual-label {
  margin-top: 45px;
  font-weight: normal;
  font-size: 10px;
  color: #BDBDBD;
}

.export-button {
  color: white !important;
  background-color: #00ACC1 !important;
  border-color: #00ACC1 !important;
}

.export-button:hover {
  color: black !important;
  background-color: white !important;
}

.export-button:active {
  color: black !important;
  background-color: white !important;
}

.export-button:target {
  color: black !important;
  background-color: white !important;
}

.export-button:focus {
  color: black !important;
  background-color: white !important;
}

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.ui-autocomplete {
  position: absolute;
  cursor: default;
  z-index: 30 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="image-bg-fluid-height" style="display: flex;">
            <div class="col-md-8 gradient-background">
                <div class="col-md-12">
                    <div class="col-md-3 feature-box">
                        <span class="icon default-bg"><img src="/logos/favicon.png" width="100px" height="100px" style="margin-top: 25px;"></span>
                    </div>
                    <div class="col-md-9 col-xs-6 col-sm-3 feature-box text-color">
                        <h6>TECHNOLOGY</h6>
                        <h3>Tech</h3>
                        <p>Loream Loream Loream Loream Loream Loream Loream Loream Loream Loream Loream Loream .</p>
                    </div>
                </div>
                <div class="row pull-right">
                <span class="tld-span pull-right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a data-toggle="modal" data-target="#export-modal" style="cursor: pointer;"><i class="fa fa-share-square-o"></i> Export</a>
                </span>
                </div>
            </div>
            <div class="col-md-4" style="background-color: #FAFAFA;">
                <div class="col-md-12" style="flex: 1;">
                    <div class="col-md-12 feature-box text-center">
                        <p>Count</p>
                                                <hr style="border-top: dotted 1px #BDBDBD;">
                        <p>Top websites</p>
                        <a href="#top-websites" class="btn btn-default tech-button">VIEW WEBSITES</a>
                    </div>
                </div>
            </div>

    </header>

注意:顶部的黑色部分是我的标题的填充。

谢谢。

Answer 1

将 CSS 样式表与内联属性样式混在一起可能不好，但是，由于您正在利用 Bootstrap ，您可以使用简单的 class="col-md-8 col-xs-12 使其响应" 这意味着在中等屏幕中占据 8/12 列，在低于中等的屏幕中占据 12/12 列。

但由于您的 display: flex; 阻止元素通过 Bootstrap 获取百分比宽度，因此您可能必须使用媒体查询 @media (min-width: 992px) 是 bootstrap 的媒体 View 的默认媒体查询

@media (min-width: 992px) { .image-bg-fluid-height { 显示:flex; }

<header class="image-bg-fluid-height">
    <div class="col-md-8 col-xs-12 gradient-background">...</div>
    <div class="col-md-4 col-xs-12" style="background-color: #FAFAFA;">...</div>
</header>

JSFiddle:https://jsfiddle.net/Zay_DEV/yc92u1g2/1/