网页无响应，文字被截断

时间：2018-08-27 13:36:31

标签： css3 responsive-design 

const burger= document.querySelector('.hb');
const wrapper= document.querySelector('.wrapper');
const timeline= new TimelineMax({});
const one= burger.querySelector(".one");
const two= burger.querySelector(".two");
const three= burger.querySelector(".three");

const lines= [one,two,three];

burger.addEventListener('mouseenter', ()=>{
  timeline.staggerTo(lines, 0.25, {scaleX: 1.5, repeat:1, yoyo: true, ease: Power2.easeInOut, svgOrigin:"50 50"}, 0.125);
});


TweenMax.to(burger, 1, { ease: Bounce.easeOut, y: 240, delay: .4});


burger.addEventListener('click', (e) =>{
  e.preventDefault();
  wrapper.className= 'show';
});
.html{
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: url(road.jpg) no-repeat 50% 50%;
  background-size: cover;
  overflow: hidden;

}

.main .wrapper {
display: flex;
flex-wrap: wrap;
}


.show{
  transition-delay:0s;
  visibility: visible;
  opacity: 1;
  transition: 1s all ease-in;
}

.hide{
  opacity: 0; visibility:hidden;

}


ul{

  list-style: none;
  display:flex;
  flex-direction: column;
}

li{
  margin-top: 1.75em;
  display: inline-block;
  text-align: center;
}

li a{
  text-decoration: none;
  color: #fff;
  /* font-family: */
  font-weight: lighter;
  font-size: 2rem;
  padding: 1.5px 30px;
  transition-duration: 170ms;
}

li a:hover{
  color: #fff;
  border: 1px solid #fff;
  border-radius: 14px;
}

.burger{
  position: absolute;
  top: 1.3rem;
  left: 1.4rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="next.css">
  <title>Document</title>
</head>
  <body>

    <nav class="navbar">
      <span class="burger">
        <a href="#">
          <svg class="hb" width="50" height="50">
              <path class="one" d="M0,5 40, 5" stroke="#fff" stroke-width="5"/>
              <path class="two" d="M0,14 40,14" stroke="#fff" stroke-width="5"/>
              <path class="three" d="M0,23 40,23" stroke="#fff" stroke-width="5"/>
          </svg>
        </a>
      </span>



<div class="main">

    <div class="wrapper hide">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Search</a></li>
      </ul>
    </div>

</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>



<script src="next.js"></script>


  </body>
</html>

当我调整窗口大小时，底部的列表项会被切除。

如果需要添加媒体查询来解决此问题或发生什么，我不确定会发生什么情况。

我认为页面的组成部分会随着页面大小的调整而缩小，请帮助您写评论。 谢谢

它要求我添加更多详细信息，因为它主要是代码，我不确定是否可以解决此问题，因为我是该网站的新手，所以我要放置一些虚拟文本。

<div class="main">

<div class="wrapper hide">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Search</a></li>
  </ul>
</div>

css：

.html{
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: url(road.jpg) no-repeat 50% 50%;
  background-size: cover;
  overflow: hidden;

}

.main{

}

.wrapper{
}

.show{
  transition-delay:0s;
  visibility: visible;
  opacity: 1;
  transition: 1s all ease-in;
}

.hide{
  opacity: 0; visibility:hidden;

}


ul{

  list-style: none;
  display:flex;
  flex-direction: column;
}

li{
  margin-top: 1.75em;
  display: inline-block;
  text-align: center;
}

li a{
  text-decoration: none;
  color: #fff;
  /* font-family: */
  font-weight: lighter;
  font-size: 2rem;
  padding: 1.5px 30px;
  transition-duration: 170ms;
}

li a:hover{
  color: #fff;
  border: 1px solid #fff;
  border-radius: 14px;
}

2 个答案:

答案 0 :(得分：0)

尝试将此flex css属性添加到您的容器中。这将防止任何重叠。另外，我摆脱了.hide类的不透明度0和可见性0。对我来说这没有意义。

const burger= document.querySelector('.burger');
const wrapper= document.querySelector('.wrapper');
const timeline= new TimelineMax({});
const one= burger.querySelector(".one");
const two= burger.querySelector(".two");
const three= burger.querySelector(".three");

const lines= [one,two,three];

burger.addEventListener('mouseenter', ()=>{
  timeline.staggerTo(lines, 0.25, {scaleX: 1.5, repeat:1, yoyo: true, ease: Power2.easeInOut, svgOrigin:"50 50"}, 0.125);
});


TweenMax.to(burger, 1, { ease: Bounce.easeOut, y: 240, delay: .4});


burger.addEventListener('click', (e) =>{
  e.preventDefault();
  wrapper.className= 'show';
});
.html{
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: url(road.jpg) no-repeat 50% 50%;
  background-size: cover;
  overflow: hidden;

}

.main .wrapper {

}


.show{
  transition-delay:0s;
  visibility: visible;
  opacity: 1;
  transition: 1s all ease-in;
}

.hide{
  opacity: 0; visibility:hidden;

}


ul{

  list-style: none;
  display:flex;
  flex-direction: column;
  
  flex-wrap: wrap;
}

li{
  margin-top: 1.75em;
  display: inline-block;
  text-align: center;
}

li a{
  text-decoration: none;
  color: #000;
  /* font-family: */
  font-weight: lighter;
  font-size: 2rem;
  padding: 1.5px 30px;
  transition-duration: 170ms;
}

li a:hover{
  color: #cecece;
  border: 1px solid #fff;
  border-radius: 14px;
}

.burger{
  position: absolute;
  top: 1.3rem;
  left: 1.4rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="next.css">
  <title>Document</title>
</head>
  <body>

    <nav class="navbar">
      <span class="burger">
        <a href="#">
          <svg class="hb" width="50" height="50">
              <path class="one" d="M0,5 40, 5" stroke="#000" stroke-width="5"/>
              <path class="two" d="M0,14 40,14" stroke="#000" stroke-width="5"/>
              <path class="three" d="M0,23 40,23" stroke="#000" stroke-width="5"/>
          </svg>
        </a>
      </span>



<div class="main">

    <div class="wrapper hide">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Search</a></li>
      </ul>
    </div>

</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>



<script src="next.js"></script>


  </body>
</html>

答案 1 :(得分：0)

您已将overflow: hidden;和height: 100vh应用于body元素，这将高度限制为视口/窗口的高度，而不会使其垂直溢出或增长。

我建议您将height: 100vh更改为min-height: 100vh，以便在必要时允许body高于窗口，或者擦除overflow: hidden;，这将允许滚动条（如果需要）。

相关问题
最新问题