背景图片,手机和媒体查询

时间:2016-09-06 11:24:15

标签: html css media-queries

我试图让它对手机做出响应。我有背景图像,不能正确调整大小。我尝试过媒体查询,但不知道它为什么不起作用。我的代码如果在下面;



.container3{
  display: flex;
  align-items: center;
  background-size: cover;
  height: 700px;
  text-shadow: 0.25px 0.25px 0.25px #000000;
  background-image: url('Images/homepage.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

@media all and (max-width:480px)and(min-width:0px) {
  .container3 {
    width: 100%;
    background-image: url('Images/homepage.jpg');
  }
}

<html>	
  <title>Unity</title>
  <link href="Style.css" rel="stylesheet"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <meta name="viewport" content="width=500, initial-scale=1">
  <body>

    <div class="container3">
      <div class="title">
        <h1>
          bringing people together
        </h1>
        <p>free advertising space</p>

      </div>	
    </div>


  </body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

&#13;
&#13;
.container3{
  display: flex;
  align-items: center;
  background-size: cover;
  height: 700px;
  text-shadow: 0.25px 0.25px 0.25px #000000;
  background-image: url('Images/homepage.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

@media all and (max-width:888px) {
  .container3 {
    width: 100%;
    background-image: url('http://feelgrafix.com/data/background/background-17.jpg');
  }
}
&#13;
<html>	
  <title>Unity</title>
  <link href="Style.css" rel="stylesheet"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <meta name="viewport" content="width=500, initial-scale=1">
  <body>

    <div class="container3">
      <div class="title">
        <h1>
          bringing people together
        </h1>
        <p>free advertising space</p>

      </div>	
    </div>


  </body>
</html>
&#13;
&#13;
&#13;

它不起作用,因为语法错误,你应该在@media all and (max-width:480px)and(min-width:0px)中使用空格。像这样:@media all and (max-width:480px) and (min-width:0px)也是多余的,因为设备的宽度总是超过0px,所以你可以删除第二部分。

我使用了max-width:888px,因此您可以在代码段中看到示例img。