vendredi 27 février 2015

responsive images resizing based on css classes

I want to resize images basing on media queries. If this was just an image, I would attach a CSS class to the image and override it for different screen resolutions.


The thing is that the images are, actually, fontawesome icons. This is an example: http://ift.tt/1g7oLUF



<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, etc. are CSS classes that apply different sizes. What is the best approach to do responsive approach here - change icon sizes depending on screen size? I don't want to modify the 3rd party lib (font awesome) itself. It seems like changing screen resolution should replace one class with another...


Aucun commentaire:

Enregistrer un commentaire