1

I was wondering if there was a way to detect the browser width. For example, if you hit ctrl + or ctrl - and the windows zooms, is there a way to style css based on that? Box is referring to a perfectly square box. So for 100% browser with I want a layout with 3 boxes and 50% I would like to style 6 boxes on the screen. Is this possible?

Example 100% browser width

box box box

Example 50% browser width

box box box box box box

justin.esders
  • 1,316
  • 4
  • 12
  • 28
  • 1
    Doesn't seems like a simpel task: http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers – Poku May 15 '17 at 17:46
  • "Is there a way to style CSS based on that?" yes, I don't know how exactly off the top of my head: look into responsive css libraries like bootstrap – Patrick Barr May 15 '17 at 17:47
  • I think the word zoom is misleading here, to me real zoom should just zoom the page and not change layout while you are looking for ways to change layout based on width (which is doable with media queries). – Huangism May 15 '17 at 18:36

1 Answers1

1

That functionality is actually built into CSS media queries already. As a proof of concept, play with the magnification in your browser with this JSFiddle open.

At 50% magnification six boxes are visible, at 100%, there are only three. Note that this behavior will vary across devices.

Hope this helps!

<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
<div class="box five"></div>

body {
  width: 100vw;
}

.box {
  width: 50px;
  height: 50px;
  background: #555;
  display: none;
}

@media only screen and (max-width:680px) {
 .box {
    display: inline-block;
  }
}

@media only screen and (min-width:681px) {
  .one, .two, .three {
    display: inline-block;
  }
}
Rich
  • 3,156
  • 3
  • 19
  • 29