html - 如何在响应式设计中保留图标尺寸？不使用像素

Question

首先，我只想说这个页面是用于网页设计类(class)的。

我正在构建的响应式页面中有社交媒体图标，我已将 max-width:3% 应用到所有这些图标以减小它们的原始大小，因为它们是之前太大了现在，当我减小窗口的大小时，我希望图标在保持新大小的同时保持响应。但是，图标也会缩放，使它们显得太小。我知道我可以使用像素来定义固定大小，但本练习的目标之一是不以像素为单位设置图像值(只允许填充值)。

有什么办法可以实现吗？

我的html代码

<div id="footwrap">     
        <footer>

            <div id="footh3">
                <h3 class="h3">Follow me on social media:</h3>
            </div>

            <div id="footlink">
                <a href="http://www.facebook.com" target="_blank">                  
                    <img src="images/facebook-icon.svg" alt="Facebook">             
                </a>

                <a href="http://www.instagram.com" target="_blank">                     
                    <img src="images/instagram-icon.svg" alt="Instagram">               
                </a>

                <a href="http://www.youtube.com" target="_blank">                       
                    <img src="images/youtube-icon.svg" alt="YouTube">               
                </a>

                <a href="http://www.twitter.com" target="_blank">                       
                    <img src="images/twitter-icon.svg" alt="Twitter">               
                </a>
            </di>

        </footer>
</div>

我的 CSS 样式:

#footwrap {
clear: both;
padding: 2%;
}

footer {
position: relative;
clear: both;
text-align: center;
width: 100%;
height: 8em;
margin-top: 12%;
}

#footh3 {
display: inline-block;
}

footer h3 {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 1.17em;
margin-bottom: 2em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

#footlink {
display: inline-block;
}

footer a {
text-decoration: none;
}

footer img {
display: inline-block;
max-width: 3%;
height: auto;   
margin-left: 1.5%;
margin-right: 10px;
vertical-align: middle;
}

期望的结果是当 Web 浏览器窗口缩小时此页面右上角的图标如何 react :http://www.omganeshaya.com/

Answer 1

随着页面变小，您可以使用媒体查询调整到更高的百分比。参见 fiddle :https://jsfiddle.net/622r62mp/

有关媒体查询的更多信息，您可以引用此站点 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

CSS 示例

img{max-width:3%}
@media (max-width: 1000px){
  img{max-width:9%}
}
@media (max-width: 600px){
  img{max-width:15%}
}