Question

好吧，所以我试图使用@media标签替换元素显示的照片，当元素达到一定宽度时，我原来将宽度设置为100％，但是，我已经读过它可以导致响应性问题，所以我将其更改为最大宽度和最小宽度，但是，这里没有任何更改是代码。

注意：我使用chrome上的inspect元素检查了元素的宽度，并且.container在缩减时达到了767px所以我认为元素不会改变宽度是问题

body,html {
  margin: 0;
  height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 1920px) {
    
  .container {
    min-width: 768px;
    max-width: 1920px;
    height: 100%;
    background-image: url('https://images.pexels.com/photos/214519/pexels-photo-214519.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  };
};
@media only screen and (min-width: 300px) and (max-width: 767px) {
  .container {
    min-width: 300px;
    max-width: 767px;
    height: 100%;
    background-image: url('https://images.pexels.com/photos/159146/train-cargo-bow-river-banff-159146.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  };
};

<!DOCTYPE html>
<html>
    <head>
    <link href="style.css" type="text/css" rel="stylesheet" />
        <meta name="viewport" content="width=device-width" />
    </head>
    
    <body>
<div class="container"></div>
    </body>
</html>

Answer 1

对于任何想知道的人，我都明白了。这个问题的解决方案Multiple CSS @media conditions don't seem to be working由于某种原因修复了它，即使我已经尝试过了。这是代码

body,html {
  margin: 0;
  height: 100%;
}
.container{
    width: 100%;
    height: 100%;
    background-color: black;
}
@media screen and (min-width: 300px) and (max-width: 1000px){
    .container {
        background-image: url('https://images.pexels.com/photos/7882/light-bulb-light-old.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}
@media screen and (min-width: 1001px) and (max-width: 1920px){
    .container{
        background-image: url('https://images.pexels.com/photos/531321/pexels-photo-531321.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
        background-position: left center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

<!DOCTYPE html>
<html>
    <head>
    <link href="style.css" type="text/css" rel="stylesheet" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    
    <body>
<div class="container"></div>
    </body>
</html>


<!-- since I created this in a full screen browser you have to make your broswer window pretty big to get it to change but it does work -->

Answer 2

问题是你的右括号（不要使用};，只能使用}）。

此外，您无需同时指定最小和最大宽度。

body,html {
  margin: 0;
  height: 100%;
}

@media (min-width: 768px){
    
  .container {
    min-width: 768px;
    max-width: 1920px;
    height: 100%;
    background-image: url('https://images.pexels.com/photos/214519/pexels-photo-214519.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

@media (max-width: 767px) {
  .container {
    min-width: 300px;
    max-width: 767px;
    height: 100%;
    background-image: url('https://images.pexels.com/photos/159146/train-cargo-bow-river-banff-159146.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

<!DOCTYPE html>
<html>
    <head>
    <link href="style.css" type="text/css" rel="stylesheet" />
        <meta name="viewport" content="width=device-width" />
    </head>
    
    <body>
<div class="container"></div>
    </body>
</html>

@media宽度：100％

2 个答案: