html - 使 div 屏幕大小依赖

Question

我正在使用 Ionic 框架开发一个应用程序，但我仍然是 css 的新手。我创建了一个带有计时器的图像 slider ，但它的大小是固定的。但是，我想将其更改为取决于屏幕尺寸和分辨率。

这是html内容:

<ion-content>
    <div class="container">
        <div id="content-slider">
            <div id="slider">
                <div id="mask">
                    <ul>
                        <li id="first" class="firstanimation">
                            <a href=#><img src="../img/coffe_and_sweet_sale.jpg"/></a>
                            <div class="tooltip"><h1>text 1</h1></div>
                        </li>
                        <li id="second" class="secondanimation">
                            <a href="#"><img src="../img/pizza_sale.png"/></a>
                            <div class="tooltip"><h1>text 2</h1></div>
                        </li>
                        <li id="third" class="thirdanimation">
                            <a href="#"><img src="../img/sandwich_sale.jpg"/></a>
                            <div class="tooltip"><h1>text 3</h1></div>
                        </li> 
                    </ul>
                </div>
            </div>
        </div>
    </div>
  </ion-content>

在

style.css

我做了类似的事情:

#slider{
    background: #000;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    height: 320px;
    width: 680px; 
    margin: 40px auto 0;
    overflow: visible;
    position: relative;
}

#mask{
    overflow: hidden;
    height: 310px;
}

#slider ul{
    margin: 0;
    padding: 0;
    position: relative;
}

#slider li{
    width: 680px;
    height: 320px;
    position: absolute;
    top: -325px;
    list-style: none;
}

#slider img{
    width: 680px;
    height: 320px;
}

所以现在它可以完美地显示图像，但它当然不适合任何屏幕。

EDIT 1

我正在为 slider 动画添加样式:

#slider li.firstanimation{
    animation: cycle 24s linear infinite;
}

#slider li.secondanimation{
    animation: cycletwo 24s linear infinite;
}
#slider li.thirdanimation{
    animation: cyclethree 24s linear infinite;
}

@keyframes cycle{
    0% {top: 0px;}
    3.33% {top: 0px;}
    26.64% {top:0px; opacity: 1; z-index: 0;}
    29.97% {top: 325px; opacity: 0; z-index: 0;}
    30.97% {top:-325px; opacity: 0; z-index: 0;}
    93.34% {top:-325px; opacity: 0; z-index: 0;}
    96.67% {top: -325px; opacity: 0; }
    100% {top: 0px; opacity: 1;}
}

@keyframes cycletwo{
    0% {top: -325px; opacity: 0;}
    26.64% {top: -325px; opacity: 0}
    29.97% {top:0px; opacity: 1;}
    33.3% {top: 0px; opacity: 1;}
    59.94% {top: 0px; opacity: 1; z-index: 0;}
    63.27% {top: 325px; opacity: 0; z-index: 0;}
    64.27% {top: -325px; opacity: 0; z-index: -1; }
    100% {top: -325px; opacity: 0; z-index: -1;}
}

@keyframes cyclethree{
    0% {top: -325px; opacity: 0;}
    59.94% {top: -325px; opacity: 0;}
    63.27% {top:0px; opacity: 1;}
    66.6% {top: 0px; opacity: 1;}
    93.24% {top: 0px; opacity: 1;}
    96.57% {top: 325px; opacity: 0; z-index: 0;}
    97.57% {top: -325px; opacity: 0; z-index: -1;}
    100% {top: -325px; opacity: 0; z-index: -1;}
}

#slider .tooltip{
    background: rgba(0,0,0,0.7);
    width: 450px;
    height; 60px;
    position: relative;
    bottom: 85px;
}

#slider .tooltip h1{
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 10px;
}

#slider .tooltip {
    transition: all 0.3 ease-in-out;
}

Answer 1

我为高度添加了一个媒体查询。 Here's如果您想更改某些内容，请使用媒体查询链接。

至于 slider ，我现在已经解决了第三张和第一张幻灯片之间存在空白幻灯片的问题。我不确定它是否是设计使然。希望您能在需要时修复它。

   #slider{
    background: #000;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    height: 320px;
    width: 80%; 
    max-width: 680px;
    margin: 40px auto 0;
    overflow: visible;
    position: relative;
  }

  #mask{
    overflow: hidden;
    height: 310px;
  }

  #slider ul{
    margin: 0;
    padding: 0;
    height: 320px;
    width: inherit;
    position: relative;
  }

  #slider a{
    width: 100%;
    height: 100%;
  }  

  #slider li{
    width: inherit;
    height: 320px;
    position: absolute;
    top: 100px;
    list-style: none;
  }

  #slider img{
    width: 100%;
    height: 320px;
  }
  #slider li.firstanimation{
    animation: cycle 24s linear infinite;
  }

  #slider li.secondanimation{
    animation: cycletwo 24s linear infinite;
  }
  #slider li.thirdanimation{
    animation: cyclethree 24s linear infinite;
  }

  @keyframes cycle{
    0% {top: 0px;}
    3.33% {top: 0px;}
    26.64% {top:0px; opacity: 1; z-index: 0;}
    29.97% {top: 325px; opacity: 0; z-index: 0;}
    30.97% {top:-325px; opacity: 0; z-index: 0;}
    93.34% {top:-325px; opacity: 0; z-index: 0;}
    96.67% {top: -325px; opacity: 0; }
    100% {top: 0px; opacity: 1;}
  }

  @keyframes cycletwo{
    0% {top: -325px; opacity: 0;}
    26.64% {top: -325px; opacity: 0}
    29.97% {top:0px; opacity: 1;}
    33.3% {top: 0px; opacity: 1;}
    59.94% {top: 0px; opacity: 1; z-index: 0;}
    63.27% {top: 325px; opacity: 0; z-index: 0;}
    64.27% {top: -325px; opacity: 0; z-index: -1; }
    100% {top: -325px; opacity: 0; z-index: -1;}
  }

  @keyframes cyclethree{
    0% {top: -325px; opacity: 0;}
    59.94% {top: -325px; opacity: 0;}
    63.27% {top:0px; opacity: 1;}
    66.6% {top: 0px; opacity: 1;}
    93.24% {top: 0px; opacity: 1;}
    96.57% {top: 325px; opacity: 0; z-index: 0;}
    97.57% {top: -325px; opacity: 0; z-index: -1;}
    100% {top: -325px; opacity: 0; z-index: -1;}
  }

  #slider .tooltip{
    background: rgba(0,0,0,0.7);
    width: 60%;
    height; 60px;
    position: relative;
    bottom: 85px;
  }

  #slider .tooltip h1{
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 10px;
  }

  #slider .tooltip {
    transition: all 0.3 ease-in-out;
  }

  @media screen and (max-height: 380px){
    #slider{
      height: 200px;
    }

    #mask{
      height:190px;
    }

    #slider img{
      height:190px;
    }

    #slider li{
      height:190px;
    }

    #slider ul{
      height:190px;
    }

    #slider .tooltip{
      bottom: 80px;
    }        
  }