1. jQuery 无法正常工作 / 2. 响应问题
1. jQuery doesn't work properly / 2. responsive issue
第一个问题是我将 jQuery CDN 链接到我的 html 文件，编写了 jQuery 效果代码（我希望文本在页面加载后淡入）但是它所做的只是隐藏文本。
第二个问题是我正在尝试做完全响应的网站，每个部分都应该是 100vh，但是当我将 window 缩小到小于 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>
$(".fade").hide(0).delay(300).fadeIn(500) 以 class 为 fade 的目标元素，但 none 的元素具有 fade class。您也可以只使用 CSS 隐藏这些元素，然后使用 JS 显示它们。我将 body 更改为 opacity: 0;，然后应用你的 jQuery 将 .ready 的 class 添加到 body，这将触发 opacity: 1; 并且效果将 transition/fade 与 body 上的 transition 行一起。
$(document).ready(function(){
$(".heading").delay(300).removeClass('fade');
});
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;
}
<!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>
回复：修复较小屏幕上的布局问题，你想要做的是 re-position 事情，以便你使用可缩放到各种屏幕的相对单位，或者你想查看 CSS @媒体查询。您所做的是调整浏览器的大小，直到布局中断，并且在布局中断的任何 width/height 处，引入一个 CSS @media 查询 "breakpoint" 来更改元素的布局重叠或破坏网站的 UI。这是媒体查询的一个很好的参考 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
第一个问题是我将 jQuery CDN 链接到我的 html 文件，编写了 jQuery 效果代码（我希望文本在页面加载后淡入）但是它所做的只是隐藏文本。 第二个问题是我正在尝试做完全响应的网站，每个部分都应该是 100vh，但是当我将 window 缩小到小于 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>
$(".fade").hide(0).delay(300).fadeIn(500) 以 class 为 fade 的目标元素，但 none 的元素具有 fade class。您也可以只使用 CSS 隐藏这些元素，然后使用 JS 显示它们。我将 body 更改为 opacity: 0;，然后应用你的 jQuery 将 .ready 的 class 添加到 body，这将触发 opacity: 1; 并且效果将 transition/fade 与 body 上的 transition 行一起。
$(document).ready(function(){
$(".heading").delay(300).removeClass('fade');
});
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;
}
<!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>
回复：修复较小屏幕上的布局问题，你想要做的是 re-position 事情，以便你使用可缩放到各种屏幕的相对单位，或者你想查看 CSS @媒体查询。您所做的是调整浏览器的大小，直到布局中断，并且在布局中断的任何 width/height 处，引入一个 CSS @media 查询 "breakpoint" 来更改元素的布局重叠或破坏网站的 UI。这是媒体查询的一个很好的参考 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries