html - 使 id 具有响应性

Question

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

http://quick.as/lnlhra

我希望图标能够响应浏览器的大小。现在，我为每个图标设置了 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;

}

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

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;
  }
}