使艾滋病响应

时间:2013-08-15 01:46:32

标签: html css responsive-design

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

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;

}

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

1 个答案:

答案 0 :(得分: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;
  }
}