Search code examples
cssscalabilitymedia-queriesscalingviewport

css - using media queries to scale content

I'm wondering if there is a way to use media queries to scale a divs contents (not the entire browser's contents). I have a fluid width site in which, when the window resizes past a certain point, some of the content gets buried behind some other content, and I'd like to be able to scale it.

I have two issues - one is that I'm using ems for the fonts, but the fonts don't scale as the browser resizes. Are they supposed to?

Second, some of the contents of the div I'd like to resize are images - so I'm not sure how to scale those other than to use a css scale property which wouldn't be supported on some browsers.

Can anyone recommend the easiest way to handle this? I've attached a screenshot of what happens on the site.enter image description here

Solution

  • I believe part of this was touched on yesterday:

    To resize your fonts according to the screen I believe you want viewport sized fonts:

    vw vh and vmin.

    http://css-tricks.com/viewport-sized-typography/

    For resizing the images, just specify sizes accordingly for each screen size. You can also set specific font sizes according to screen size, or any CSS property for that matter:

    /* mobile phones */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* This is where you would specify the width and hight of your images */
}

/* iPads (portrait and landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

    There's more here: Responsive backgrounds with Twitter Bootstrap?