我正在为我的一个班级开展一个项目，但遇到了一个奇怪的定位问题。我有两个来自 font-awesome 库的齿轮图标，带有一个文本标志。一个齿轮的尺寸更大，位置稍微离屏，而另一个位置几乎与较大的齿轮接触。在我的 chrome 笔记本电脑上，元素以默认的 16px 字体大小正确显示。当我切换到我的桌面时（带有 50 英寸 4k 电视显示器，铬设置为将字体大小增加 20 像素），齿轮不对齐。
我的问题：无论用户定义的文本大小如何，我如何定位这两个图标以使它们保持一致？
相关CSS：
div.logo i.cog-logo-small {
font-size: 1.5em;
top: 20px;
left: 32px;
}
div.logo i.cog-logo, div.logo i.cog-logo-small {
position: absolute;
}
div.logo i, div.logo a {
color: #c06014;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
div.logo i.cog-logo {
font-size: 3em;
top: -15px;
left: -15px;
}
相关 HTML
<nav class="top-bar clearfix">
<div class="logo">
<a href="index.html">
<i class="cog-logo fa fa-cog gear-spin fa-3x" aria-hidden="true"></i>
<i class="cog-logo-small fa fa-cog gear-spin-reverse fa-2x" aria-hidden="true"></i>
<span class="logotext">logotext</span>
</a>
<span class="tagline">tagline</span>
</div>
</nav>
问题在于固定单元 ( px) 定位。在浏览器中放大时，固定单位通常不会按预期缩放。更好的方法是使用相对单位（em、%等），它们会随着缩放级别的变化而相对变化。
这是em用于您的解决方案top/left
div.logo i.cog-logo-small {
font-size: 1.5em;
top: 1em;
left: 1em;
}
div.logo i.cog-logo, div.logo i.cog-logo-small {
position: absolute;
}
div.logo i, div.logo a {
color: #c06014;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
div.logo i.cog-logo {
font-size: 3em;
top: -.25em;
left: -.5em;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="top-bar clearfix">
<div class="logo">
<a href="index.html">
<i class="cog-logo fa fa-cog gear-spin fa-3x" aria-hidden="true"></i>
<i class="cog-logo-small fa fa-cog gear-spin-reverse fa-2x" aria-hidden="true"></i>
<span class="logotext">logotext</span>
</a>
<span class="tagline">tagline</span>
</div>
</nav>或者这里是另一种%结合使用transform: translate()
div.logo i.cog-logo-small {
font-size: 1.5em;
transform: translate(20%,20%);
}
div.logo i.cog-logo,
div.logo i.cog-logo-small {
position: absolute;
}
div.logo i,
div.logo a {
color: #c06014;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
div.logo i.cog-logo {
font-size: 3em;
transform: translate(-85%,-65%);
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="top-bar clearfix">
<div class="logo">
<a href="index.html">
<i class="cog-logo fa fa-cog gear-spin fa-3x" aria-hidden="true"></i>
<i class="cog-logo-small fa fa-cog gear-spin-reverse fa-2x" aria-hidden="true"></i>
<span class="logotext">logotext</span>
</a>
<span class="tagline">tagline</span>
</div>
</nav>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句