我在为自己建立的网站上遇到问题。
我希望图标能够响应浏览器的大小。现在,我为每个图标设置了 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 设置为百分比不是一个好主意,因为图标会在尝试保持百分比时开始重叠。有没有办法用不同的方法来解决这个问题?
最佳答案
您可以使用 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;
}
}
关于html - 使 ID 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18245072/