The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Consensus on Media Queries

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
  • #190956

    There seems to be 2 general schools of thought on the application(s) of media queries in RWD / AWD. Uncertain whether this is a natural “evolution” in thought with the passage of time, or “tried & true” best practices. (?)

    Approach #1 : Incorporate the use of a (rather lengthy) list of “common device widths” which address specific devices and work on that premise while modifying the accompanying CSS breakpoints as you work “up” from “mobile first” ideology. The common belief is this approach is the least “future-proof” and a nightmare to maintain. The information here at CSS-Tricks seems to support this very approach. Here is an example:

    Mod edit, added link instead of code:

    Approach #2 : Choose a more limited, say 3 (“small” / “medium” / “large”) media queries assignments, again based on common device widths and modify as dictated at design breakpoints (layout, styles, typography) in the purest sense of “responsiveness / adaptability” of the site design. Basic idea :

    /*==========  Mobile First Method  ==========*/
    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    For those “familiar” with me, am I still procrastinating? Alen pegged me, ” Paralysis by analysis.”



    Not sure what you are asking but please don’t dump code like that. It takes up WAY to much room. A link is preferable.


    Breakpoints for responsive design are found in the design itself, not on the sizes of any particular screen.


    Choose a more limited, say 3 (“small” / “medium” / “large”) media queries assignments

    Mobile First is not about “small, medium, large”. It’s about embracing the constraints of mobile and designing for that form first, then using Progressive Enhancement to enhance the experience as the viewport increases. The small, medium, and large approach is a lazy-man cookie-cutter-boilerplate crap. Mobile First is a different mindset completely. It’s fundamentally different from Desktop First approach.

    Responsive Design is about embracing fluidity of web. If you separate the layout from your content. As long as your individual pieces of content are responsive, where they are in the grid shouldn’t matter, as long as the grid itself is responsive. It helps to look at things individually and how they behave in specific space at specific viewport. Don’t be device specific, be space specific. If that makes sense.

    Hope that helps,


    I think Approach #2 is where you want to go but defining breakpoints regardless of design would be a mistake. Maybe you only need two breakpoints. Maybe you need four. I don’t think there’s ever going to be a definitive method for every project.

    Avoid Approach #1 though :)


    Not to be a misfit, but why start building for the smallest target group?

    Do you mean mobile? If so you couldn’t be more wrong. Mobile is outselling Desktop since 2010!


    First of all as __ said above, definitely don’t use preset media queries. Add them where ever your design requires them. There’s a million devices and screen sizes, there’s no fit-all formula.

    As far as where to start, it all depends for me. If I’m going to support IE8 and below I start at a medium resolution that will fit in 1024px wide. If I’m going IE9+ I start with the smallest resolution, that way mobile users aren’t rendering a ton of css then changing/hiding it. Not to mention its a lot easier (for me) to add rather than subtract.


    Sorry ’bout that Paulie_D. I am one who relies on the formatting “widgets” here in the comments section to enable me to use such functionality. Where did those go by the way? Point me in the right direction and I’ll make note of them in the future. Thanks for the mod btw. I’ll consider my hands “slapped.” :)


    Thanks for all the replies. Approach #1, as I understand it, is the one approach to avoid at all costs. I fully comprehend the notion that device specific media queries are to be avoided at all costs. Screen sizes & devices are in constant flux. I wasn’t sure how verboten it actually is as there still exists a lot of references to it as a viable “school of thought” on the net. Clearly outdated according to the comments I have received here. That’s good.

    With regard to approach #2. I would have imagined more supportive commentary, the values chosen were only to illustrate an example. It’s not that I considered assigning preset breakpoints per say, I understand “breakpoints” are identified when negative results occur as the site (elements) “grow” from the mobile first platform onto larger screens like those found on tablets, desktops, etc.

    The mobile first approach is my plan of attack. I read more advantages than disadvantages to it’s reasoning and benefits. This is my first attempt at thinking outside the box of fixed-width (static) designs toward “responsive” designs and functionality. I am looking forward to playing with it SOON. Grids still confuse me, perhaps I’m not understanding them as I should. Here I go again, but can someone point me in the right direction as to which grid is most beneficial and easy to use. I really see no difference in the many that exist out in the wild. Working with columns & rows in varying numbers seems I dunno – like riding a bike with the training wheels on…..

    I do understand the idea of Progressive Enhancement, thanks Alen for the link, that one is new to me. Question: where do I start if not from at least one media query (mobile) to “set-the-stage.” The user agent has to have a starting point, right? (Screen size wise, am I making my point clear?) 320px?

    I apologize if my thinking is difficult to follow, and appreciate those who were capable of responding to my inquiry with crystal clear insights.


    Question: where do I start if not from at least one media query (mobile) to “set-the-stage.” The user agent has to have a starting point, right? (Screen size wise, am I making my point clear?) 320px?

    No. You’re thinking fixed width again. Your initial style is mobile style. Your first breakpoint is modifying the mobile view. See very simplified example:


    @ Robby

    I think I can safely dismiss IE 8 at this point, it’s market share is diminishing at an accelerating pace. I don’t see it as a major hurdle I need to be overly concerned with.




    “Your initial style is mobile style.” Wow, never even thought…..!

    Am I missing something here?

    “See very simplified example:” (?)


    If you resize the browser when looking at the CodePen example you’ll see the box change colors at certain breakpoints. If you look at the code you’ll see what I mean by “Your initial style is mobile style.”

    The very cascading nature of CSS… Mobile view will be red, next breakpoint is yellow, then blue, and finally pink.



    Thanks bud.


    Thanks, illustrates your point very well. Pretty cool actually, starting from “nothing” like that, then of course assign styles at your breakpoints.

    I needed to “see” something like that.


    Adapting a mobile design to a huge screen is much easier than adapting a huge design to a small screen.

    Not necessarily.

    First: in general there’s not all too much difference between creating mobile styles and then add up for desktop on one side, and creating desktop styles and then remove for mobile on the other.

    But for me personally, designing mobile first is just less natural cause my actual development process takes place on desktop.

Viewing 15 posts - 1 through 15 (of 21 total)
  • The forum ‘Other’ is closed to new topics and replies.