我正在尝试创建一个网站，而我正在努力实现自适应图标字体。我已经成功了（使用媒体查询）但是当屏幕发生变化时，随着屏幕尺寸变小，空间开始显示和增长。
Small Screen size - Large space between icon fonts and the text
Big screen size - small space between icon fonts and text
这是我的HTML代码 - 我尝试删除＆＃34;＆lt; / span＆gt;＆＃34;作为消除换行的手段：
<div class="item">
<span class = "icon-mobile">
<span class="caption">Call </div>
<div class="item">
<span class = "icon-mail">
<span class="caption">Email </div>
<div class="item">
<span class = "icon-location">
<span class="caption">Studio </div>
<div class="item">
<span class = "icon-calendar">
<span class="caption">Hours</div>
以下是HTML div / classes的CSS3代码（.contact_details是容器）：
.contact_details{
text-align: center;
}
.item {
vertical-align: top;
display: inline-block;
width:auto;
height:auto;
margin:0% auto;
color: #b31b1b;
}
/* Text Below Icon Fonts*/
.caption {
display: block;
text-align: center;
}
CSS3媒体查询代码是：
@media screen and (max-width: 299px) {
.icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item {
font-size: 2vw;
}
.caption {
font-size: 1.5vw;
}
}
@media screen and (min-width: 300px) and (max-width: 799px) {
.icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item{
font-size: 90%;
}
.caption {
font-size: 30%;
}
}
@media screen and (min-width: 800px) {
.icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item {
font-size: 5vw;
}
.caption {
font-size: 2vw;
}
}
我尝试添加＆＃34;身高：50px;＆＃34;和＆＃34;身高：自动;＆＃34;标题和项目类。我在网站上创建一个重复的行后尝试创建一个flexbox来测试：
.contact_details2{
display: flex;
justify-content: center;
}
.item2{
flex: 1 1 20em;
padding: 0!important;
}
.caption{
padding: 0!important;
}
以下是icon-fonts的代码，只是对某人有用：
@font-face {
font-family: 'debssite';
src: url('fonts/debssite.eot');
src: url('fonts/debssite.eot?#iefix') format('embedded-opentype'),
url('fonts/debssite.woff2?') format('woff2'),
url('fonts/debssite.woff?') format('woff'),
url('fonts/debssite.ttf?') format('truetype'),
url('fonts/debssite.svg?') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'debssite';
src: url('./fonts/debssite.svg?#debssite') format('svg');
}
}
*/
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "debssite";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-calendar:before {
content: "\e800";
font-size: 64px;
color: #b31b1b;
}
.icon-location:before {
content: "\e801";
font-size: 64px;
color: #b31b1b;
}
.icon-mail:before {
content: "\e802";
font-size: 64px;
color: #b31b1b;
}
.icon-facebook:before {
content: "\f09a";
font-size: 32px;
color: #b31b1b;
margin-right 4%;
}
.icon-mobile:before {
content: "\f10b";
font-size: 64px;
color: #b31b1b;
margin:0px;
}
.icon-youtube:before {
content: "\f167";
font-size: 32px;
color: #b31b1b;
margin-right 4%;
}
.icon-instagram:before {
content: "\f16d";
font-size: 32px;
color: #b31b1b;
margin-right 4%;
}
.icon-pinterest:before {
content: "\f231";
font-size: 32px;
color: #b31b1b;
margin:10px;
}
如果您认为您的评论不会有帮助（可能是！），我将非常感谢您尝试解决此问题的任何帮助/意见。
谢谢，
理查德
创建了一个编辑，用于添加图标字体的代码。
答案 0 :(得分：0)
.contact_details{
text-align: center;
}
.item {
vertical-align: top;
display: inline-block;
width:auto;
height:auto;
margin:0% auto;
color: #b31b1b;
}
/* Text Below Icon Fonts*/
.caption {
display: block;
text-align: center;
}
The CSS3 media queries code is:
@media screen and (max-width: 299px) {
.icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item {
font-size: 2vw;
}
.caption {
font-size: 1.5vw;
}
}
@media screen and (min-width: 300px) and (max-width: 799px) {
.icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item{
font-size: 90%;
}
.caption {
font-size: 30%;
}
}
@media screen and (min-width: 800px) {
.icon-mail:before, .icon-mobile:before, .icon-calendar:before, .icon-location:before, .item {
font-size: 5vw;
}
.caption {
font-size: 2vw;
}
}
I have tried adding height: 50px; and height: auto; to the caption and item classes. I have tried creating a flexbox after creating a duplicate line:
.contact_details2{
display: flex;
justify-content: center;
}
.item2{
flex: 1 1 20em;
padding: 0!important;
}
.caption{
padding: 0!important;
}<div class="item">
<span class = "icon-mobile">
<span class="caption">Call
</div><div class="item">
<span class = "icon-mail">
<span class="caption">Email
</div><div class="item">
<span class = "icon-location">
<span class="caption">Studio
</div><div class="item">
<span class = "icon-calendar">
<span class="caption">Hours</div>
答案 1 :(得分：0)
问题是line-height，一旦我将其设置为0，我就能消除空白区域。