Grow your CSS skills. Land your dream job.

[Solved] Media queries "mobile first"

  • # May 19, 2012 at 5:37 pm

    Quick question about media queries and the term “mobile first”. What does that refer to: design and code a site for mobile first, or put the code for mobile first in your CSS file?

    I’m redoing one of my sites right now, and it sounds strange to do all the work to make it look right on a mobile site first, then add code to make it look proper on tablets, and then add more code for monitors.

    It DOES make sense to put the media queries for mobile first, then for tablets, and then for screens, like this:

    @media (max-width: 320px) {<br />
    /* code for mobile only */<br />
    }<br />
    <br />
    @media (min-width: 320px) and (max-width: 720px) {<br />
    /* code for tablets only */<br />
    }<br />
    <br />
    @media (min-width: 720px) {<br />
    /* all other code if its not mobile or tablet */<br />
    }Because simply put, screen larger leads to lower code overriding previous code.
    

    Basically, is that’s the proper method for “mobile first”, or is it really considered “create your site to look good on mobile first”?

    # May 20, 2012 at 2:40 am

    I actually took it as designing for mobile first. Although it’s only an opinion and I don’t agree with it.

    # May 21, 2012 at 6:59 am

    Yes, it makes sense to design for mobile first IF you think you’ll need to serve it that way.

    If you are, then your basic styles will apply to all resolutions and you only need to override a limited number of classes for larger screens.

    I think, in general, that will reduce CSS bloat but as ChristopherBurton said, it’s only an opinion.

    Whatever works for you, works for you and that’s all that matters.

    # July 31, 2012 at 2:51 pm

    I’m curious to how people approach their media queries when taking the mobile first approach as well.

    When considering IE8 (and any other browser that doesn’t support @media), this is a big deal. If you write your CSS media queries to use the mobile styles by default then enhance up as the screen get’s larger, IE8 will only use your default styles (ignores anything in @media wrapper).

    So, can you take the mobile first approach with your CSS if you want to support IE8? There are many cases where you don’t want IE8 users to only see your mobile styles.

    # July 31, 2012 at 3:10 pm

    I think you are misunderstanding the concept of ‘mobile first’

    The idea is to design (not code) with mobile in mind first…you can code it any way you like.

    Media queries can be in any order. CSS styles for desktop can come before mobile styles.

    # July 31, 2012 at 3:40 pm

    @Paulie_D – Exactly. The term refers to planning for your website to take advantage of mobile phones during the design stage.

    # July 31, 2012 at 3:53 pm

    I don’t think it’s necessarily true that the media queries can be in any order. Especially when there are styles that apply to more than one query.

    # July 31, 2012 at 5:03 pm

    @Senff I’m fairly sure you can put Media Queries in any order.

    It makes sense to use a logical progression but I don’t think it’s mandatory as long as the majority of your base styles will be used all the time.

    Obviously, any styles you add to your MQ will override the base styles so you have to be careful to avoid bloat.

    # July 31, 2012 at 5:32 pm

    Well, what I mean is that if you have overlapping styles/queries, the order does matter since it will take the last one that applies.

    Example:

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* iPhone, both portrait and landscape */
    h1 {color:#f00;}
    }

    @media only screen and (max-width : 320px) {
    /* iPhone, portrait only */
    h1 {color:blue;}

    In this case, H1 will be blue in portrait mode iPhone, and red in landscape mode.

    But if we switch the queries:

    @media only screen and (max-width : 320px) {
    /* iPhone, portrait only */
    h1 {color:blue;}

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* iPhone, both portrait and landscape */
    h1 {color:#f00;}
    }

    In this case, H1 will always be red….

    I understand what you mean if you say the order of the queries doesn’t really matter, but essentially, the contents of the queries do, because that’s just the generic “last one wins” CSS rule.

    I guess the order really doesn’t matter if each query is unique and very specific, and only one of them would apply.

    # September 4, 2012 at 6:37 pm

    After I read Luke Wroblewski’s “mobile first” one of the main take-away’s I got was, in designing for mobile, it’s an approach or point of view, things like page-load, content priorities and clean simple design come to the fore (as they should in general web design).
    One of the last things he covers is media-queries. It’s a great read.

    - D

    # October 13, 2012 at 6:47 am

    @media only screen and (min-width : 1em) {}

    =P

    # February 24, 2014 at 6:13 am

    I understand this is an old post but i’m looking at the ‘mobile first’ concept and there are a few things I just can’t get my head around. However one point that was emphasized in the screen cast I watched for mobile first was the page load times and how coding CSS styles for mobile first reduces the number of requests for images and such giving better performance. I actually think this is a great way to build it and it makes sense.

    The part that I am confused about in the media queries as the tutorial wasn’t as clear in the practical part as it was the theoretical part.

    By declaring the default styles as the mobile first styles is fine but using the media queries for the various break points as we build up from the smallest device are we specifying a query for min-width or max-width? or a min and max width?

    # February 24, 2014 at 6:51 am

    Thanks Paulie_D I have just read through this, so if I understand it correctly for mobile first you would use ‘@media (min-width: 320px;)` and then the same working up through whatever break points you need until you reach desktop screen sizes? say ‘@media (min-width:1024px;)’

    # February 24, 2014 at 7:03 am

    Basically yes but you really don’t need to specify the first one since it would be the default styling.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".