Question

我在为自己构建的网站上遇到了问题。

我希望图标能够响应浏览器大小。现在，我为每个图标设置了CSS，左边设置为某个百分比，例如对于一个图标，html为：

<a id="mail" class="social" href="mailto:nishadt15@gmail.com"></a>

#mail和.social的CSS是：

.social {

position: absolute;
top: 95%;
height: 40px;
width: 45px;
text-decoration: none;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #3db48b;
cursor: pointer;

-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;  
}

#mail {
left: 39%;
background: url(../img/mail.png) no-repeat center center; 
background-size: 40px 40px;

}

显然将左侧设置为百分比是一个坏主意，因为图标将在尝试维持百分比时开始重叠。有没有办法用不同的方法来解决这个问题？

Answer 1

您可以使用CSS媒体查询使图标响应：您甚至可以分配不同的图像，不仅可以更改位置：

示例：

@media (max-width: 600px) {
  /* Styles for devices with maximum of 600px width */
  #mail {
     left: 39%;
     background: url(../img/mail.png) no-repeat center center; 
     background-size: 40px 40px;
  }
}

@media (min-width: 600px) and (max-width: 1200px) {
  /* Styles for devices with minimum of 600px width and up to 1200px in width */
  #mail {
     left: 20%;
     background: url(../img/mail2.png) no-repeat center center; 
     background-size: 80px 80px;
  }
}

使艾滋病响应

1 个答案: