我想根据媒体查询调整图像大小。如果这只是一张图片,我会为图片附加一个 CSS 类,并针对不同的屏幕分辨率覆盖它。
事实是,这些图像实际上是 字体精美的图标。这是一个例子:http://fortawesome.github.io/Font-Awesome/examples/
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
fa-lg、fa-2x、fa-3x等是应用不同尺寸的CSS类。在这里进行响应式处理的最佳方法是什么 - 根据屏幕大小更改图标大小?我不想修改第 3 方库( Font Awesome )本身。似乎更改屏幕分辨率应该用另一个类替换一个类......
最佳答案
fa-lg
与 fa-5x
是同一个图标,只是调整了大小。因此,对于您的媒体查询,只需使用普通的 font-size:
方法将图标的大小调整为您喜欢的任何大小。
我通常使用 before:
和字体 FontAwesome
使用它们的 unicode,如此处所示; http://fortawesome.github.io/Font-Awesome/icon/camera-retro/统一码:f083
.aside .cat_title:before {
content: "\f083";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size: 32px;
padding-right: 3px;
color: #FC0;
}
@media only screen
and (max-width : 320px) {
.aside .cat_title:before {
content: "\f083";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size: 10px;
padding-right: 3px;
color: #FC0;
}
}
然后再为每个媒体查询等
关于html - 基于 css 类调整响应式图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28775543/