Question

我正在尝试使用@media来更改网站的背景图片

当我使用@media (orientation: landscape)时，可以正常工作，但是当我使用min和max宽度时，则不显示任何背景

我插入了 <meta name="viewport" content="width=device-width, initial-scale=1"> 在使用css文件的页面中。

@media screen and (min-width: 1501px) and (max-width: 6000px)  {
body {
/* this one doesn't work*/
background: url(/afbeeldingen/overzichtskaart.jpg);
background-repeat: no-repeat;
/*background-size: 100% 100%*/
}
}

@media screen (max-width: 1500px) and {
body {
/* this one doesn't work*/
background: url(/afbeeldingen/overzichtskaart_laptop.jpg);
background-repeat: no-repeat;
/*background-size: 100% 100%*/
}
}

@media  (orientation: landscape) {
body {
/* this one does work*/
background: url(/afbeeldingen/overzichtskaart_laptop.jpg);
background-repeat: no-repeat;
/*background-size: 100% 100%*/
}
}

我不想使用横向选项，而是根据宽度大小更改背景。

Answer 1

您使用的语法错误。正确的语法是@media only screen and (min-width: 1501px) and (max-width: 6000px)和@media only screen and (max-width: 1500px)。

尝试一下：

@media only screen and (min-width: 1501px) and (max-width: 6000px) {
  body {
    background: url(https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
    background-repeat: no-repeat;
  }
}

@media only screen and (max-width: 1500px) {
  body {
    background: url(https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
    background-repeat: no-repeat;
  }
}

引用：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

希望有帮助。干杯！

Answer 2

这仅仅是因为您没有正确编写CSS。下面的示例可能对您有所帮助。

@media screen and (min-width:1501px) and (max-width:6000px)  {
h1{

background-color:red;

}
}

@media only screen and (max-width: 1500px) {
h1 {
background-color:green;
}
}

<h1>This is test</h1>

Answer 3

如果您在原始CSS中使用该注释语法，则可能是造成麻烦的部分原因：行首的//在CSS中不适用于注释。 CSS中的注释必须写为/* ... your code ... */。

您的第二条CSS规则不应以@media screen (max-width: 1500px) and {...作为选择器，而应以@media screen and (max-width: 1500px) {...（即错误的顺序）作为选择器

@media横向可以正常工作，但最小宽度和最大宽度都没有

3 个答案: