基于CSS类的自适应图像大小调整

Question

我想根据媒体查询调整图像大小。 如果这只是图像，我将在图像上附加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类。 在这里采取响应式方法的最佳方法是什么-根据屏幕尺寸更改图标尺寸？ 我不想修改第三方库（真棒字体）本身。 似乎更改屏幕分辨率应将一个类替换为另一个类...

Answer 1

fa-lg与fa-5x只是一个图标，只是调整了大小。 因此，对于媒体查询，只需使用普通的font-size:方法将图标调整为您喜欢font-size: 。

我通常before:使用before:使用FontAwesome字体FontAwesome使用其unicode，如下所示； http://fortawesome.github.io/Font-Awesome/icon/camera-retro/ Unicode： 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;
    }

  }

然后再次针对每个媒体查询等。

Answer 2

基于@ Anima-t3d的建议，我组成了一个非常适合我的javascript / media-query解决方案：

var mql = window.matchMedia("(min-width: 600px)");
mql.addListener(handleResolutionChange);
handleResolutionChange(mql);

function handleResolutionChange(mql) {
  if (mql.matches) {
    $('.fa').removeClass('fa-2x');
  } else {
    $('.fa').addClass('fa-2x');
  }
}

有一个侦听器，它监视屏幕分辨率，并添加或删除内置在fontawesome中的CSS类。 有关更多信息， 请访问： https : //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries