1

Is there a way to scale down/up all elements including texts, images, etc. depending on the browser width? It is like 'zooming out' using your browser just to avoid the browser horizontal scrollbar.

Perroquiet
  • 177
  • 1
  • 2
  • 14

2 Answers2

3

You can resize images and video with just this css rule.

img, video { max-width: 100%; }

For text, you can work with em's to adjust to the viewport and resolution. You should also set the font size on the html and body element

html {
    font-size: 100%;
}

body {
    font-size: 1em;
}

/* Adjust the font size here to upscale the font when you've resized the page to 700px */
@media screen and (max-width: 700px) {
    html { font-size: 110%; }
}

If you're actually thinking about literally zooming in/out for certain viewports, just use media queries. Like this:

@media all and (max-width: 700px) and (min-width: 400px) {
    /* some funky stuff */
}

EXTRA

To smoothen the transition between different viewports, use this css property on the html tag

transition: all 1s ease;
Vince C
  • 868
  • 6
  • 16
  • @Perroquiet This is actually the correct answer, except that the `vw` unit should be used on the html `font-size: 1vw`. Try to expand/shrink the browser on [http://oneapi.ru/showcases/](http://oneapi.ru/showcases/) – Jose Rui Santos Nov 13 '15 at 18:18
  • Actually, I meant on `body { font-size: 1vw }` instead of `html`, and have all the site defined in relative measurements with `em` as can be checked in the aforementioned site. – Jose Rui Santos Nov 13 '15 at 18:36
1

Yes, though it requires JavaScript and doesn't work with all browsers, only those which support CSS zoom (which I know at least Firefox does not). How I do it, is say the standard non-zoomed page width is 1024, I use jQuery with the line

$("html").css("zoom",window.innerWidth/1024);

every time the window is resized (using window.onresize). The site I'm using it on is still non-public so I can't show you the example, but it works pretty well.

Dan Goodspeed
  • 3,484
  • 4
  • 26
  • 35