Css linear-gradient 50% left and right To top and bottom on mobile 问题答案

【问题标题】：Css linear-gradient 50% left and right To top and bottom on mobile IssueCss linear-gradient 50% left and right To top and bottom on mobile 问题
【发布时间】：2019-05-19 09:59:35
【问题描述】：

我的基本要求是制作一个 2 列，其中 50% 红色（左）和 50% 白色（右），左列有文本，右列有图像。它适用于我在大屏幕到常规屏幕上的解决方案。使用引导程序 4，自然 2 列将从顶部和底部从一侧到另一侧。由于我使用“线性渐变”制作背景颜色，因此我进行了快速媒体查询并将颜色设置为顶部和底部。

问题是，我不得不总是搞乱/编写不同的媒体查询，并且一个屏幕尺寸总是像这样中断

我编写了多个媒体查询和调整图像列的颜色百分比和最大高度。好像我从根本上做错了什么。有没有更好的引导解决方案？还是一种适用于所有屏幕的更好的 CSS 方式？

.app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  }
  .app-headline .text-content-left {
    background: #d4272e;
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}

<html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>


</head>

<body>
<div class="pt-4 pb-4">
  <h1>test</h1>
</div>
  <section class="app-headline border">
    <div class="container">
      <div class="row  py-5 text-white">
        <div></div>
        <div class="col-lg-6 pb-4 text-content-left">
          <div class="text-content-left-texts">
            <div class="inner-push-left">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6  img-content-right align-self-center">
          <img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
        </div>
      </div>
    </div>
  </section>



  <script type="text/javascript">

  </script>


</body>

</html>











<!-- 
<section class="product-promotion-display border">
    <div class="">
      <div class="row no-gutters d-flex justify-content-center text-white">
        <div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
          <div class="text-content-left-texts p-5 ">
            <div class="inner-push-left offset-lg-3">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
          <img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
        </div>
      </div>
    </div>
  </section> -->

【问题讨论】：

我更新了答案

标签： twitter-bootstrap css bootstrap-4 media-queries

【解决方案1】：

您需要从媒体查询中删除以下内容，您可以尝试使用伪元素进行着色以创建溢出并隐藏白色部分：

.app-headline .text-content-left {
     background: #d4272e;
}

完整代码：

.app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
  overflow:hidden;
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  } 
  .app-headline .text-content-left {
    position:relative;
    z-index:0;
  }
  .app-headline .text-content-left::before {
    content:"";
    position:absolute;
    top:0;
    left:-50vw;
    right:-50vw;
    bottom:0;
    z-index:-1;
    background: #d4272e;
  }

  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }

  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}

<html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>


</head>

<body>
<div class="pt-4 pb-4">
  <h1>test</h1>
</div>
  <section class="app-headline border">
    <div class="container">
      <div class="row  py-5 text-white">
        <div></div>
        <div class="col-lg-6 pb-4 text-content-left">
          <div class="text-content-left-texts">
            <div class="inner-push-left">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6  img-content-right align-self-center">
          <img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
        </div>
      </div>
    </div>
  </section>



  <script type="text/javascript">

  </script>


</body>

</html>











<!-- 
<section class="product-promotion-display border">
    <div class="">
      <div class="row no-gutters d-flex justify-content-center text-white">
        <div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
          <div class="text-content-left-texts p-5 ">
            <div class="inner-push-left offset-lg-3">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
          <img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
        </div>
      </div>
    </div>
  </section> -->

【讨论】：

非常感谢，我看到的唯一问题是，如果此部分下方有内容，则图像类型会超出/低于移动部分

【解决方案2】：

请关注：--

这里 48 是您的上边距，26 是左侧区域的下边距。刷新检查一下。

var height = jQuery(".app-headline .text-content-left").height();	
	var actual_height = height + 48 + 26 + 'px';
	jQuery(".app-headline").css("background","linear-gradient(to bottom, #d4272e " + actual_height.toString() + ", #fff 50%)");

 .app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  }
  .app-headline .text-content-left {
    background: #d4272e;
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}

<html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>

</head>

<body>
<div class="pt-4 pb-4">
  <h1>test</h1>
</div>
  <section class="app-headline border">
    <div class="container">
      <div class="row  py-5 text-white">
        <div></div>
        <div class="col-lg-6 pb-4 text-content-left">
          <div class="text-content-left-texts">
            <div class="inner-push-left">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6  img-content-right align-self-center">
          <img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
        </div>
      </div>
    </div>
	  
  </section>

【讨论】：