9

Ask DN: Media Queries for Your Responsive Websites

over 5 years ago from , Front End Web Developer - Freelance

Hi there,

i'm just wondering what generic media queries you guys use when making a responsive website.

I tend to use the following...

.module // mobile styles

@media screen and (min-width: 768px) // tablet styles

@media screen and (min-width: 1024px) // desktop styles

Would be super helpful to see if that's how others did it??

Thanks!

8 comments

  • Julio Marroquin, over 5 years ago (edited over 5 years ago )

    People usually recommend using a mobile-first approach. Build the site for mobile, and then start re-sizing the site until the design "breaks" and create a break point there. Repeat until you reach desktop. This way each site gets a custom treatment.

    I also tend to use bootstrap's grid for quick projects (just download the grid and responsive elements). I'm pretty sure they did some research on where to set their breakpoints before releasing bootstrap so for a quick project I'll trust theirs. I always end up adding a couple of media queries for landscape views in tablet and mobile though.

    I still think every project needs a custom treatment. For example, on my latest project I only used 2 media queries (responsive project)

    @media screen and (max-width: 767px) for mobile.

    @media screen and (max-width: 1024px) for tablet.

    5 points
  • Simon LarocheSimon Laroche, over 5 years ago

    Having defined breakpoints limits you to what you can do, and what might look the best. Having a true responsive website, elements should change independently of each other, at the breakpoint they need. There's no "this is mobile" breakpoint, it just works at any resolution from 320px to 4000px. Things like breakpoint grids that bootstrap uses are quick development tools, but I believe they are anti patterns. One should use not use css grids, but ratio grids. Have the grid change any any breakpoint you want, as long as it looks good the whole way.

    We started off good with responsive design, then people built frameworks and tried to make it simpler to work with. If that's your goal is quick building, then there's no issue in setting up 4 breakpoints and just hamming it out. But it's the wrong way for true responsive.

    3 points
    • Rasmus ErikssonRasmus Eriksson, over 5 years ago

      While I agree with your sentiment I think it's a bit unfair to brush off frameworks as a "quick fix" sort of thing. In my experience most real-world projects have deadlines that don't allow for completely bespoke systems.

      I usually end up using Susy as a middle-ground.

      2 points
      • Jameson Tyler, over 5 years ago (edited over 5 years ago )

        Bourbon Neat is a nice lightweight example of this. And it allows for breakpoints wherever you need them. Bourbon Neat

        0 points
      • Simon LarocheSimon Laroche, over 5 years ago

        Things like Susy are exactly what I mean, it's a ratio grid. You can set any breakpoint you want and use any grid size you want.

        Generally you end up with a much nicer result at then end rather than relying on the fixed breakpoints that are just uninteresting, inflexible, and in my opinion an anti-pattern.

        0 points
  • Nathaniel PeralesNathaniel Perales, over 5 years ago

    I actually find that depending on the site, using restive.js library works really well for most of my needs.

    1 point
  • Marc EdwardsMarc Edwards, over 5 years ago

    Here’s my pixel density and zoom query:

    https://gist.github.com/marcedwards/3446599

    For screen width, it depends on the content. Having said that, around 740px can be a good breakpoint to switch to a tablet layout (means iPhone Plus isn’t captured).

    1 point
  • Dan Boland, over 5 years ago

    I typically use a few prefabbed breakpoints as general starting points, then adjust and add more as I refine the design.

    1 point