Skip navigation
Currently Being Moderated

Minimum number of css media queries?

Dec 3, 2013 2:31 AM

What's the minimum number of css media queries I can get away with?

 

I don't want to go overboard and start targeting specific devices such as ipad, iphone, portrait, landscape etc

 

I just need to make a website a bit more 'generally' compatible with mobile devices, especially smart phones.

 

Any opinions?

 

Cheers

 

Os

 
Replies
  • Currently Being Moderated
    Dec 3, 2013 3:05 AM   in reply to osgood_

    Hi Os,

     

    The minimum number of media-queries required to make you page reflow to fit all browsers and devices is '0'

     

    That said, this depends on your layout, how good your knowledge is in using css flexbox, and if you are happy doing a separate stylesheet inside an IECC for IE9 and below, (IE9 and below is not used on more than 0.2% market share of smartphones or tablet devices, so can be ignored as far as 'resizing' goes).

     

    If you are not happy about using flexbox, or having to create fall-back for IE9 and below, then there is no definitive answer to your question. The general view now is to use media-queries at breakpoint set when your layout starts to break, and not at set screen sizes. This can mean anything from one to xx media-queries.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2013 3:08 AM   in reply to osgood_

    Hi Os,

     

    These are the ranges that can be found in the current version of Foundation where 1em = 16 px.

    $small-range: (0em, 40em);

    $medium-range: (40.063em, 64em);

    $large-range: (64.063em, 90em);

    $xlarge-range: (90.063em, 120em);

    $xxlarge-range: (120.063em);

    if you want to reduce this by applying a max width, I would stay with the first two of the list, i.e. a breakpoint at 40em (640px) and a max width of 64em (1024px)

     

    You could crib a bit on the max width, depending on the layout, of up to 90em (1440px).

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2013 3:18 AM   in reply to pziecina

    @Paula,

     

    I know that you are actively promoting flexbox, but I still have a problem using it at this stage. The current browser support is 40% with an added 35% partial support, totaling 75%.

     

    In your defense, Chris Coyier is also excited about the prospect of using flexbox.

     

    I hope you can prove me wrong, as I am sure that it will be the right way to go.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2013 3:29 AM   in reply to osgood_

    Tablet portrait is less than 640px, tablet landscape is greater than 640px.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2013 3:39 AM   in reply to Ben Pleysier

    Ben Pleysier wrote:

     

    @Paula,

     

    I know that you are actively promoting flexbox, but I still have a problem using it at this stage. The current browser support is 40% with an added 35% partial support, totaling 75%.

     

    In your defense, Chris Coyier is also excited about the prospect of using flexbox.

     

    I hope you can prove me wrong, as I am sure that it will be the right way to go.

    Hi Ben

     

    I would not say "actively promoting", but promoting definitely. The main problem with flexbox is that it requires one to rethink how web pages are built, and this does take time, something that many designers simply do not have.

     

    Although I did not do a <=IE9 fallback for this, to see how a combination of flexbox and multi-column layouts works x-device, see -

    http://flexboxlayouts.com/Surrey/index.html

     

    Sorry for hijacking the thread Os, this will be my last post regarding flexbox in this thread.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2013 3:58 AM   in reply to pziecina

    @Paula  ,

     

    Please don't apologise, I find your heads up thinking very challenging and tend to learn a lot from it.

     

    I also love the simplicity of the responsive design using flexbox. This gives us all an insight into the very near future of web design.

     

    Thank you!

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2013 8:41 AM   in reply to osgood_

    As PZ wrote in her first response, you are better to create media queries for the size at which your layout breaks, not to specific device sizes.

    The general view now is to use media-queries at breakpoint set when your layout starts to break, and not at set screen sizes. This can mean anything from one to xx media-queries.

     

    PZ

     

    As such, I would use Firefox's responsive design view to see when things start to look out of sorts and use media queries to fix that. With so many devices out there now at different sizes, it's near impossible to cover them all. Having a fluid % based layout and well placed media queries will help a lot.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points