Question

我在HTML页面中制作了macOS Dock的副本。调整浏览器大小时，Dock中的图像会出现（li img）。如何让图像重新调整大小并保持在停靠状态而不会出现？

我的CSS：

.dock ul{
    display: inline-block;
    float: left;
    width: auto;
    margin:0px;
    padding-top: 20px;
    list-style: none;
    padding-right: 0px;
}
.dock ul li {
    width: 80px;
    height: auto;
    display: inline-block;
    bottom: 0;
    vertical-align: bottom;
    margin-top: -43px;
}
.dock ul li a {
    display: block;
    height: 100px;
    width: 120px;
    position: relative;
    -webkit-transition-property: width, height,margin-top;
    -webkit-transition-duration: 0.5s;
    -o-transition-property: width, height,margin-top;
    -o-transition-duration: 0.5s;
    -moz-transition-property: width, height,margin-top;
    -moz-transition-duration: 0.5s;
}
.dock ul li a:hover {
    width: 150px;
    height: 150px;
    margin-top: -50px;
}
.dock ul li a img {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border: none;
    padding: 0px 0px 0px 0px;
}
.dock_div{
    position:fixed;
    left:8%;
    width:82%;
    bottom:0%;
    z-index:300;
}

Answer 1

您可以将％unit用于img标记的宽度。所以它可以根据浏览器窗口进行缩放。另一种方法是使用以下媒体查询

    /* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}

现在在每个媒体查询中为您提供图像的CSS，例如：

/* Smaller than standard 960 (devices and browsers) */
      @media only screen and (max-width: 959px) {
    .dock ul li a img {
            width: 80%;
            position: absolute;
            bottom: 0;
            left: 0;
            border: none;
            padding: 0px 0px 0px 0px;
    }

如何使这个CSS成为响应式的？

1 个答案: