Media query to turn site into mobile site

Question

I've been looking at a few websites, in order to construct my own websites, and I've noticed that when you zoom in past a certain percentage, the website emulates a mobile display. No horizontal scrollbar appears, and everything fits onto the page, and only the page length increases.

Here are a few example websites - https://generalassemb.ly/, http://learnlayout.com/, http://dev.opera.com/

I'm not sure how they implement this is their design, and have searched the web for an explanation.

If possible, could you walk me through it with example CSS?

Thanks

Answer 1

This has nothing to do with the zoom, but with the current width of the window, ( At least in your examples, the same happens when you change your browser's window to a smaller size ) they are most likely using CSS media queries to apply conditional styles depending on the width.

Sample ( from first google result http://css-tricks.com/css-media-queries/ )

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}