Question

我正在制作一个在起始页面背景上有视差的网站当我在去重新调整它时，它运行良好但是当我在移动设备上时，背景没有调整大小，看起来背景仍然与大屏幕相同：

/* Start page */

.start-page{
  position:relative;
  width:100%;
  height:100%;
  z-index:10;
  background:url('../img/background/start-page.jpg') #c0c0c0 bottom center fixed no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.start-page hr{
  color: white;
  margin-top:30px;
  background-color: white;
  height: 1px;
  width:106px;
  border:0;

}

.start-page .opacity{
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(51,51,51,0.5); /* Standard Off */
}


.start-page .content{
  position:relative;
  width:700px;
  margin:0 auto;
  height:100%;
}

.start-page .content .text{
  position:absolute;
  text-align:center;
  margin:auto;
  top:0; 
  left:0; 
  bottom:0; 
  right:0;
  width:700px;
  height:520px;
}

.start-page .content .text .logo{
  width:195px;
  height:153px;
  margin:0 auto 50px;
  
}

.start-page .content .text .read-more{
  width:183px;
  height:47px;
  margin:100px auto;
  line-height:47px;
  border:1px solid white;
  text-transform:uppercase;
  color:white;
  display:block;
  cursor:pointer;
  font-size:14px;
  letter-spacing:1px;
  background:none;
  -webkit-transition: all 0.6s ease-in;
	-moz-transition: all 0.6s ease-in;
	-ms-transition: all 0.6s ease-in;
	-o-transition: all 0.6s ease-in;
	transition: all 0.6s ease-in;
}

.start-page .content .text .read-more:hover{
  color:white;
  background:#ad2503;
  border:1px solid #ad2503;
}

.start-page .content .arrow-down{
  position: absolute;
  bottom: 110px;
  left: 50%;
  margin-left: -10px;
  width: 21px;
  height: 29px;
  background: url(../img/arrow-down.png) no-repeat center center;
  display: block;
  -webkit-animation: bounce-fade 1.2s infinite; /* Safari 4+ */
  -moz-animation:    bounce-fade 1.2s infinite; /* Fx 5+ */
  -o-animation:      bounce-fade 1.2s infinite; /* Opera 12+ */
   animation:        bounce-fade 1.2s infinite; /* IE 10+ */
}






@media (min-width: 320px) and (max-width: 579px) {



.start-page {
	 background: url('../img/background/start-pagemin.png') #c0c0c0 center center fixed no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position:relative;
}
.start-page .content {
  width:300px;
  height:100%;
}

.start-page, .start-page .opacity{
  height:100%;
}
.start-page .content .text {
  width:300px;
  text-align:center;
}

<!DOCTYPE html>
<html lang="fr">

<div class="container">


<!-- section start-page -->

  <div class="start-page parallax-background" id="home">

    <div class="opacity"></div> <!-- Opacity color -->
      <div class="content">
        <div class="text">
        
          <div class="logo"><img src="img/logo.png"></div>
        
        
          
         
          
        </div>

我不知道该片段看起来不起作用但我的问题只是我必须做的媒体查询才能让我的背景调整大小

Answer 1

我不完全确定你在问什么，但我认为你需要viewport meta tag。 iOS假设您的页面宽度为980px并缩小所有内容以适应，除非您包含此内容，这会使您的所有内容显得更小。

在移动设备上做出回应

1 个答案: