1. jQuery无法正常工作/ 2.响应问题

时间：2017-01-17 19:39:38

标签： jquery html css responsive effect

第一个问题是我将jQuery CDN链接到我的html文件，编写了jQuery效果代码（我希望文本在页面加载后淡入）但它所做的只是隐藏文本。 第二个问题是我正在尝试做完全响应的网站，并且每个部分应该是100vh，但是当我将窗口缩小到小于iPhone 6 Plus分辨率时，来自其他部分的图像和文本开始在其他部分上重叠等。我该如何解决？我是一个初学者，我很乐意听到一些批评要改进。

$(document).ready(function() {
  $(".fade").hide(0).delay(300).fadeIn(500);
});
body {
  font-family: Gotham A, Gotham B, Helvetica, Arial, sans-serif;
}
h1 {
  font-size: 3em;
  text-transform: uppercase;
}
h4 {
  font-size: 1.5em;
  color: #9e9e9e;
}
section {
  width: 100%;
  display: inline-block;
  margin: 0;
  max-width: 960;
  height: 100vh;
  vertical-align: middle;
}
#welcome-screen {
  width: 100%;
  display: table;
  margin: 0;
  max-width: none;
  height: 100vh;
  background-color: #ebebeb;
  padding: 0 7%;
}
.heading {
  display: table-cell;
  vertical-align: middle;
}
.heading-span {
  display: block;
  color: #8e8e8e;
  font-size: 18px;
  margin-top: 0px;
  text-transform: none;
}
.scrolldown-button {
  position: absolute;
  display: table;
  text-align: center;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto 0 auto;
  width: 48px;
  height: 48px;
  font-size: 20px;
}
a {
  color: #000000;
  transition: ease-in-out 0.15s;
}
a:hover {
  color: #d09800;
  text-decoration: none;
}
#about {
  width: 100%;
  min-height: 100vh;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 30px;
}
p {
  display: column;
  vertical-align: middle;
  max-width: 960px;
  margin-top: 50px;
}
.content-heading-span {
  display: block;
  font-size: 2em;
  margin-top: 0px;
  text-transform: uppercase;
  margin-left: -20px;
  color: #d09800;
}
.contact-btn {
  font-size: 2em;
  color: #000000;
}
.photo {
  margin-bottom: 3em;
}
.copyright {
  text-align: center;
  color: #cccccc;
}
.phone {
  display: column;
  vertical-align: middle;
  max-width: 960px;
  margin-top: 0px;
  font-size: 2em;
  color: #000000;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="test.js"></script>
</head>
<body>
  <section id="welcome-screen">
    <div class="heading fade">
      <h1><span class="heading-span">Hi! My name is</span>
      <strong>John Doe</strong>
      </h1>
    </div>
    <div class="scrolldown-button">
      <a href="#about"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
    </div>
  </section>
  <section>
    <div id="about">
      <div class="wrapper">
        <span><img src="http://www.placehold.it/250x250" class="photo"></img></span>
        <p><span class="content-heading-span"><strong>About me</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut
          lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus
          ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa.
          Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
        <a href=""><strong>Download my resume</strong></a>
      </div>
    </div>
    <div id="blabla">
      <div class="wrapper">
        <p><span class="content-heading-span"><strong>Lorem Ipsum sit dolor amet</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus
          rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec
          porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis
          viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
      </div>
    </div>
    <div id="blabla2">
      <div class="wrapper">
        <p><span class="content-heading-span"><strong>Proin eget elit</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna,
          ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor
          lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra
          massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
      </div>
      <div id="contact">
        <div class="wrapper">
          <p><span class="content-heading-span"><strong>consectetur tincidunt</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum
            magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor
            lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra
            massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
          <span><p>E-mail:</p></span>
          <a href="mailto:test@gmail.com" class="contact-btn">test@gmail.com</a>
          <p>mobile:</p>
          <p class="phone">235 635 123</p>
          <div class="copyright">
            <p>Copyright @ 2017 by <a href="index.html">John Doe</a>
            </p>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

$(".fade").hide(0).delay(300).fadeIn(500)定位类fade的元素，但您的元素都没有fade类。您也可以使用CSS隐藏这些元素，然后使用JS显示它们。我将body更改为opacity: 0;，然后应用您的jQuery将.ready类添加到body，这将触发opacity: 1;并且效果将转换为/使用transition上的body行淡入。

＆＃13;
＆＃13; 
$(document).ready(function(){
  $(".heading").delay(300).removeClass('fade');
});
＆＃13; 
body {
  font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
  transition: opacity .5s;
}
.fade {
  opacity: 0;
}
h1 {
  font-size: 3em;
  text-transform:uppercase;

}

h4 {
  font-size: 1.5em;
  color:#9e9e9e;
  }
section {
  width: 100%;
  display: inline-block;
  margin: 0;
  max-width: 960;
  height:100vh;
  vertical-align: middle;
}
#welcome-screen {
  width: 100%;
  display: table;
  margin: 0;
  max-width: none;
  height:100vh;
  background-color:#ebebeb;
  padding:0 7%;
}
.heading {
  display:table-cell;
  vertical-align: middle;
  transition: opacity .5s;
}
.heading-span {
    display: block;
    color: #8e8e8e;
    font-size: 18px;
    margin-top: 0px;
    text-transform:none;
}
.scrolldown-button {
  position: absolute;
  display: table;
  text-align: center;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto 0 auto;
  width: 48px;
  height: 48px;
  font-size:20px;
}
a {
  color:#000000;
  transition: ease-in-out 0.15s;
}
a:hover{
  color:#d09800;
  text-decoration: none;
}
#about {
  width: 100%;
  min-height:100vh;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height:100vh;
  padding:30px;
}
p {
  display:column;
  vertical-align: middle;
  max-width: 960px;
  margin-top:50px;
}
.content-heading-span {
  display: block;
  font-size: 2em;
  margin-top: 0px;
  text-transform:uppercase;
  margin-left:-20px;
  color:#d09800;
}
.contact-btn {
  font-size:2em;
  color:#000000;
}
.photo {
  margin-bottom:3em;
}
.copyright {
  text-align:center;
  color:#cccccc;

}
.phone {
  display:column;
  vertical-align: middle;
  max-width: 960px;
  margin-top:0px;
  font-size:2em;
  color:#000000;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script   src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>
  <script type="text/javascript" src="test.js"></script>

</head>

<body>
  <section id="welcome-screen">
    <div class="heading fade">
      <h1><span class="heading-span">Hi! My name is</span>
      <strong>John Doe</strong>
      </h1>
    </div>
    <div class="scrolldown-button">
      <a href="#about"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
    </div>
  </section>
  <section>
  <div id="about">
    <div class="wrapper">
      <span><img src="http://www.placehold.it/250x250" class="photo"></img></span>
      <p><span class="content-heading-span"><strong>About me</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
      <a href=""><strong>Download my resume</strong></a>

    </div>
  </div>
  <div id="blabla">
    <div class="wrapper">
      <p><span class="content-heading-span"><strong>Lorem Ipsum sit dolor amet</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
    </div>
  </div>
  <div id="blabla2">
    <div class="wrapper">
      <p><span class="content-heading-span"><strong>Proin eget elit</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
    </div>
<div id="contact">
    <div class="wrapper">
      <p><span class="content-heading-span"><strong>consectetur tincidunt</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
      <span><p>E-mail:</p></span>
     
     <a href="mailto:test@gmail.com" class="contact-btn">test@gmail.com</a>
      <p>mobile:</p>
      <p class="phone">235 635 123</p>
    <div class="copyright">
      <p> Copyright @ 2017 by <a href="index.html">John Doe</a></p>
      </div>
    </div>
  </div>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

Re：在较小的屏幕上修复布局问题，您要做的是重新定位事物，以便您使用可扩展到各种屏幕的相对单位，或者您想要查看CSS @media查询。你所做的是调整浏览器的大小，直到布局中断，并且无论布局中断的宽度/高度如何，在那个＆＃34;断点＆＃34;处引入CSS @media查询。这会更改重叠或破坏网站UI的元素的布局。这是媒体查询https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

的一个很好的参考
相关问题
最新问题