1
我正在創建a portfolio page in Codepen。我已決定採用固定背景，滾動網站。到目前爲止，這款筆可以與所有主流瀏覽器完美配合，除了Safari iOS移動版（在我的iPhone 6s上）。Safari iOS Mobile的瀏覽器兼容性 - 創建Codepen
問題是在div中的背景圖像不是:cover -ing。它在桌面上的Safari中正常工作。
<nav id="headNav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">FreeCodeCamp</a>
<a href="#">Contact</a>
<a href="#"><img class="roundMe shrinkMe"
src="https://image.ibb.co/hZaQYF/free_code_camp_square.png" height="40"
width="40"></a>
<a href="#"><img class="roundMe shrinkMe"
src="https://image.ibb.co/kdp8na/github_shadow_square.png" height="40"
width="40"></a>
<a href="#"><img class="roundMe shrinkMe"
src="https://image.ibb.co/jO9V0v/Twitter_shadow_square.png" height="40"
width="40"></a>
<a href="#"><img class="roundMe shrinkMe"
src="https://image.ibb.co/iwtOLv/facebook_shadow_square.png" height="40"
width="40"></a>
</nav>
<div id="homeSection" class="sectionBlock homeSection">
</div>
<div id="aboutSection" class="dividerSectionBlock">
</div>
<div id="portfolioSection" class="sectionBlock portfolioSection">
</div>
<div id="freeCodeCampSection" class="dividerSectionBlock">
</div>
<div id="contactSection" class="sectionBlock contactSection">
</div>
CSS：
* {
margin: 0;
}
html, body {
font-size:10px;
height: 100%;
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 20px;
}
.roundMe {
border-width: 0px;
border-radius: 10%;
}
p, li, a {
font-size: 1rem;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: rgba(0,0,0,.5);
z-index: 99;
}
nav a {
text-decoration: none;
color: white;
line-height: 50px;
}
.sectionBlock {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.dividerSectionBlock{
height: 50%;
}
.homeSection{
background-image: url("https://image.ibb.co/nR7rOF/forestpath.jpg");
}
.portfolioSection {
background-image: url("https://image.ibb.co/iZsfHa/highway.jpg");
}
.contactSection {
background-image: url("https://image.ibb.co/c9vviF/Meadow.jpg ");
}
#headNav a:nth-child(-n+5){
float:left;
margin-left: 30px;
}
#headNav a:nth-child(n+6){
float:right;
margin-right: 5px;
}
/* Media Queries */
/* Screens 0-399*/
@media screen and (max-width: 399px){
html {
font-size:6px
}
.shrinkMe {
height: 12px;
width: 12px;
}
nav {
height: 15px;
}
nav a {
line-height: 15px;
}
#headNav a:nth-child(-n+5) {
margin-left: 5px;
}
#headNav a:nth-child(n+6) {
margin-right: 2px;
}
}
/* Screens 400-599 */
@media screen and (min-width: 400px){
html {
font-size:8px
}
.shrinkMe {
height: 20px;
width: 20px;
}
nav {
height: 28px;
}
nav a {
line-height: 28px;
}
#headNav a:nth-child(-n+5) {
margin-left: 7px;
}
#headNav a:nth-child(n+6) {
margin-right: 4px;
}
}
/* Screens 600-799 */
@media screen and (min-width: 600px){
html {
font-size:12px
}
.shrinkMe {
height: 30px;
width: 30px;
}
nav {
height: 36px;
}
nav a {
line-height: 36px;
}
#headNav a:nth-child(-n+5) {
margin-left: 14px;
}
#headNav a:nth-child(n+6) {
margin-right: 8px;
}
}
/* Screens 800-999 */
@media screen and (min-width: 800px){
html {
font-size:16px
}
.shrinkMe {
height: 40px;
width: 40px;
}
nav {
height: 44px;
}
nav a {
line-height: 44px;
}
#headNav a:nth-child(-n+5) {
margin-left: 21px;
}
#headNav a:nth-child(n+6) {
margin-right: 12px;
}
}
/* Screens 999-1199 */
@media screen and (min-width: 1000px){
html {
font-size:20px
}
.shrinkMe {
height: 40px;
width: 40px;
}
nav {
height: 52px;
}
nav a {
line-height: 52px;
}
#headNav a:nth-child(-n+5) {
margin-left: 28px;
}
#headNav a:nth-child(n+6) {
margin-right: 16px;
}
}
/* Screens 1200 and up*/
@media screen and (min-width: 1200px){
html {
font-size:24px
}
.shrinkMe {
height: 50px;
width: 50px;
}
nav {
height: 60px;
}
nav a {
line-height: 60px;
}
#headNav a:nth-child(-n+5) {
margin-left: 35px;
}
#headNav a:nth-child(n+6) {
margin-right: 20px;
}
}