Question

在我的网站上，这是在背景图片幻灯片放映。但我也需要为身体得到同样的东西。任何人都可以帮助我吗？

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}

Answer 1

如果您想在浏览器窗口更改大小时调整页面大小，可以使用媒体查询（只有现代浏览器支持此选项） - 或者您可以选择使用javascript（第三个选项都是）。但是你的问题表明你想避免使用javascript。我在下面用媒体查询做了一个例子。当您的屏幕尺寸介于800px和1000px之间时，将应用css。您可以组合这些语句，例如只需使用min或max即可。

@media all and (max-width: 1000px) and (min-width: 800px) {
  .cb-slideshow li span {
    /* css here*/
  }
}

您可以使用媒体查询更改任何元素。它通常用于创建响应式设计。

Answer 2

如果您正在寻找如何在窗口范围内设置身体，即使内容不足，请尝试

html, body{
    width: 100%;
    height: 100%
}

Answer 3

您可以使用名为“响应式设计”的内容。它使用媒体查询根据屏幕分辨率进行调整。只需在任何热门搜索引擎中搜索响应式设计，您就可以从链接中学到很多东西。

现在您可以将此款式添加到您的身体

body {
  width:  100%;
  height: 100%;
}

这将使身体响应。

Answer 4

快速举例，只需将其添加到您的页面，当页面低于960px时，整个身体就会消失

@media screen and(max-width:960px){
   body{
      display:none;
   }
}

现在您可以添加适合所有尺寸的所需更改

如何在重新调整浏览器窗口大小时调整网页大小？

4 个答案: