个人中心
gpt4 book ai didi

css - 无法在响应式设计中转换分隔线

转载 作者：太空宇宙 更新时间：2023-11-04 00:42:28 25 4
gpt4 key购买 nike

我创建了一个模板，该模板将页面分为两部分，当我以桌面分辨率显示网站时一切正常，但是当我在智能手机上运行该网站时，我得到顶部的半圆和中间的分隔线两张图片，没有响应:

enter image description here

本质上是半个红色圆圈，应该在智能手机分辨率下缩小，并且分隔线在两个图像之外，这是我到目前为止尝试过的:

@media (max-width: 800px) {
    .divider{
        top: 14.5%;
        left: 50%;
        height: 64.2%;
        transform: translateX(-50%);
    }
    .circle{
        top: -45%;
        left: 50%;
        width: 500px;
        height: 400px;
        border-radius: 50%;
    }
    .logo{
        top: 0.5%;
        left: 22.5%;
    }
}

问题是这并没有涵盖所有的解决方案，所以问题根本没有解决。

有没有办法处理所有分辨率并使该模板真正具有响应性？

This is my fiddle .

片段:

body {
  background-color: #ffffff;
}

/*Overlay*/
.hovereffect {
  width: 50%;
  height: 90vh;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #a7151f;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 50px 20px;
  justify-content: center;
  flex-direction: column;
  display: flex;
}

.hovereffect img {
  float: left;
  width: 50%;
  height: 90vh;
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hovereffect:hover img {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 40px;
  overflow: hidden;
  padding: 0.5em 0;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
}

.hovereffect h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.hovereffect:hover h2:after {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.hovereffect a,
.hovereffect p {
  color: #FFF;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.hovereffect:hover a,
.hovereffect:hover p,
.hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  font-size: 16px;
}

/*DIVISORE*/
.middle {
  position: absolute;
  z-index: 9999;
}

.divider {
  border-right: 5px solid #a7151f;
  position: absolute;
  z-index: 10;
  top: 14.5%;
  left: 50%;
  margin: 0;
  padding: 0;
  width: auto;
  height: 76.2%;
  line-height: 0;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.circle {
  z-index: 10;
  position: absolute;
  top: -250px;
  left: 50%;
  border: 5px solid #a7151f;
  margin: 0;
  padding: 0;
  height: 100%;
  line-height: 0;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  background-color: #a7151f;
  width: 500px;
  height: 400px;
  border-radius: 50%;
}

.first {
  background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/dg1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.second {
  background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/bg9.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.logo {
  top: 2.5%;
  position: absolute;
  left: 41.5%;
  width: 200px;
  margin: 0 auto;
}
<link href="https://demos.creative-tim.com/material-kit-pro/assets/css/material-kit.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>
      Site
    </title>
  </head>

  <body class="sections-page sidebar-collapse">
    <div class="main">
      <div class="container-fluid">
        <div class="row">
          <div class="hovereffect">
            <img class="first">
            <div class="overlay">
              <h2>First</h2>
              <p>
                <a href=#">Explore</a>
              </p>
            </div>
          </div>
          <span class="divider"></span>
          <img class="img-responsive center-block circle">
          <span class="circle">
          </span>
          <img src="#" class="logo" style="z-index: 9999">
          <div class="hovereffect">
            <img class="second">
            <div class="overlay">
              <h2>Second</h2>
              <p>
                <a href="#">Explore</a>
              </p>
            </div>
          </div>
        </div>
      </div>
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center justify-content-xl-between">
            <div class="col-6">
              <div class="copyright text-center text-xl-left text-muted">
                © 2019 <a href="#" class="font-weight-bold ml-1 pul-left" target="_blank">Credit</a>
              </div>
            </div>
            <div class="col-6">
              <div class="row">
                <a href="#" class="nav-link pull-right" target="_blank">Privacy Policy</a>
                <a href="#" class="nav-link pull-right" target="_blank">Terms & Conditions</a>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </body>

</html>

最佳答案

这种布局可以用 Flexbox 实现，代码行更少。此外，需要的 HTML 标记也少得多。

总的响应能力是通过将 flexbox 行为与相关单位(%、vh、vw)相结合而实现的。

我在 CSS 中添加了几条注释来解释每条规则的作用。

body { margin: 0; }

.the-container {
  position: relative;
  overflow: hidden;
  height: 100vh; /* fill the screen */
  width: 100vw; /* fill the screen */
}

.the-circle {
  position: absolute; /* overlap the pics, removes it from the box flow */
  background-color: #a7151f;
  border-radius: 50%; /* rectangle becomes an ellipse */
  width: 60vw;
  height: 30vh;
  top: -15vh; /* half of the height */
  left: 0; /* these 3 lines... */
  right: 0; /* ...keep the "circle"... */
  margin: auto; /* ...centered at the top */
}

.the-image-wrapper {
  display: flex; /* easy responsive columns */
  height: 100%; /* fill the screen */
}

.the-image-wrapper > div {
  flex: 1 0 auto; /* items inside the wrapper will grow to fit avilable space */
}

.the-image-wrapper > div.the-divider {
  flex: 0 1 5px; /* this divider item will not grow, and will be 5px wide */
  background-color: #a7151f;
}

.first {
  background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/dg1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.second {
  background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/bg9.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
<div class="the-container">
  <div class="the-circle"></div>
  <div class="the-image-wrapper">
    <div class="first"></div>
    <div class="the-divider"></div>
    <div class="second"></div>
  </div>
</div>

关于css - 无法在响应式设计中转换分隔线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58031220/

25 4 0
文章推荐： python - 在 Python 的 logging.conf 中设置日志级别
文章推荐： java - 用C写Java这段？
文章推荐： node.js - 如何在Hapi.Js中获取完整的url？
文章推荐： python - 强制 Celery 使用 Python 3
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com