Question

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

＆＃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:480px)and(min-width:0px) {
  .container3 {
    width: 100%;
    background-image: url('Images/homepage.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;

Answer 1

＆＃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;

它不起作用，因为语法错误，你应该在@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。

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

1 个答案: