以响应式方式布置图标
Posted
技术标签:
【中文标题】以响应式方式布置图标【英文标题】：Laying out icons in responsive way 【发布时间】：2015-02-08 13:08:09 【问题描述】：我想连续布置 40x40px 的图像图标，当浏览器缩小时应该会自动缩小尺寸。
使用此技术后：Make an image responsive - simplest way 每个图像都跨越了整个窗口宽度（大约 1144 像素）。
我应该如何纠正这个问题？
我使用了以下代码
<div id="customtoolbar">
<div class="topbar">
<div class="icons">
<a href="http://wsris:9191/" class="icon icon-papercut"><img src="sites/default/files/newicons/papercut.png" border="0" style="width:100%"></a>
<a href="https://www.google.com/calendar" class="icon icon-cyberoam"><img src="sites/default/files/newicons/calendar.png" border="0" style="width:100%"></a>
<a href="https://docs.google.com/" class="icon icon-drive"><img src="sites/default/files/newicons/drive.png" border="0" style="width:100%"></a>
<a href="https://mail.google.com/" class="icon icon-gmail"><img src="sites/default/files/newicons/gmail.png" border="0" style="width:100%"></a>
<a href="http://mycompanyschool.in/" class="icon icon-calendar"><img src="sites/default/files/newicons/calendar.png" border="0" style="width:100%"></a>
<a href="https://clas-s-room.google.com/u/0/welcome?emr=0" class="icon icon-clas-s-room"><img src="sites/default/files/newicons/clas-s-room.png" border="0" style="width:100%"></a>
</div>
【问题讨论】：
使用max-width:40px;?
您还在寻找答案还是对您提供的解决方案感到满意？
@apaul34208 是的，我正在寻找应该是理想的正确答案。我提到了我从脑海中尝试过的东西。
您的解决方案有什么特别不理想的地方需要改进吗？
@apaul34208 只是我想知道以自适应方式进行布局的最佳方式。我不擅长 CSS。像你这样的专家应该告诉什么是理想的。
【参考方案1】：
哦，我是通过使用“width:5%”或 6% 作为 img 标签来实现的，无论图标看起来如何。现在他们响应了：
img
width:5%;
height:auto;
max-width:40px;
【讨论】：
【参考方案2】：您可以进行媒体查询并为您想要的每个分辨率设置大小：
@media (max-width: 500px)
img
width:32px;
height:32px;
@media (min-width: 501px)
img
width:40px;
height:40px;
这是一个关于 Mozilla 媒体查询的链接：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
这是一个 jsfiddle：http://jsfiddle.net/alexfqc/0uft975k/
你可以给背景图片：
html 代码：
<div id="penguin"></div>
CSS 代码：
#penguin
background: url('http://images.all-free-download.com/images/graphiclarge/penguin_clip_art_7050.jpg') no-repeat;
width:408px;
height:425px;
background-size: 75%;
jsfiddle 代码：http://jsfiddle.net/alexfqc/ozh0qzpc/
【讨论】：
【参考方案3】：试试下面的 CSS：
img
width:100%;
max-width:40px;
height:auto;
如果你使用 css width:100%，它会将 img 宽度设置为可用的浏览器宽度。使用 max-width 。
【讨论】：
这将使图像在所有屏幕上保持 40 像素宽，除非屏幕宽度小于 40 像素。【参考方案4】：过分夸张的解决方案
-
我建议您使用 CSS 精灵，即不要创建六个图标，只需创建一个包含所需图标的图像。
CSS sprite 可以用作背景图片，并使用
background-size: cover 进行响应。
使用通过填充的固定纵横比技术，以便您的图标根据屏幕大小按比例扩大/缩小。
在链接中添加一些文本标签，以便搜索引擎可以阅读它们。
.icon
display: inline-block;
width: 16%; /* 100% / 6, subtract some room for whitespace */
max-width: 40px; /* maximum 40px wide */
text-indent: -999px; /* this hides the text labels */
background-size: cover; /* crop-fill the icon with background image */
background-image: url(http://i.stack.imgur.com/sPkRn.png);
box-shadow: 0 0 1px #000000;
.icon:after
content: ""; /* this is the fixed aspect ratio trick */
display: inline-block;
padding-top: 100%;
width: 1px;
vertical-align: bottom; /* this elimiates bottom whitespace */
.icon.icon-papercut
background-position: 0 0; /* align background's top-left */
.icon.icon-cyberoam
background-position: 0 20%; /* 6 icons on sprite -> 0, 20%, 40%, ..., 100% */
.icon.icon-drive
background-position: 0 40%;
.icon.icon-gmail
background-position: 0 60%;
.icon.icon-calendar
background-position: 0 80%;
.icon.icon-clas-s-room
background-position: 0 100%;
<div class="icons">
<a href="#" class="icon icon-papercut">Papercut</a>
<a href="#" class="icon icon-cyberoam">Cyberoam</a>
<a href="#" class="icon icon-drive">Drive</a>
<a href="#" class="icon icon-gmail">GMail</a>
<a href="#" class="icon icon-calendar">Calendar</a>
<a href="#" class="icon icon-clas-s-room">Clas-s-room</a>
</div>这是示例中使用的图像：
【讨论】：
以上是关于以响应式方式布置图标的主要内容，如果未能解决你的问题，请参考以下文章