Best Way to Use Media Queries for Mobile Designs

Best way to use Media Queries for Mobile Designs

There are (at least!) four ways to do this:

1. Normal CSS, with media queries at the bottom (so they override the CSS above)
2. Two (or more) CSS files loaded using media queries on the link element
3. Server side detection that adds different CSS links in the HTML
4. Server side detection then a redirect to m.example.com, or example.com/mobile

If you are talking minor changes (float:none, different font sizes etc) then I'd go for 1.
If there are lots and lots of changes to the CSS, I'd use 2 or 3 (3 isn't as good, as you rely on useragents, rather than screen properties). If the HTML and CSS changes, I'd use 4.

For all of this, check your work in Internet Explorer 6 - 8, they may ignore the media queries and use all the CSS, including the mobile bits if you use 1.

Have a look at http://mediaqueri.es/ for some examples of sites using 1 and 2.

Here's another resource that might help: https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

Which are the most important media queries to use in creating mobile responsive design?

I'd recommend taking after Twitter's Bootstrap with just these four media queries:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Edit: The original answer (above) was taken from Bootstrap version 2. Bootstrap has since changed their media queries in version 3. Notice that is there is no explicit query for devices smaller than 768px. This practice is sometimes called mobile-first. Everything outside of any media query is applied to all devices. Everything inside a media query block extends and overrides what is available globally as well as styles for all smaller devices. Think of it as progressive enhancement for responsive design.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Check it out on Bootstrap 3's docs.

Media Queries: How to target desktop, tablet, and mobile?

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.

Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

Best way to catch mobile css media query

The media query to identify a mobile user uses the device-width, but which is the best value to set the breakpoint?

There are a few theories out there on how to handle this. Some people go and find the most popular device widths and set their breakpoints at those places. This is great if you know for certain what most users on your site use. However, the downsides are that you have to mold your design to those widths and you have to continually update your code as new devices come out.

So your breakpoints would be something like:

// iPhone 6
@media only screen and (min-device-width : 375px) {
    // styles go here
}
// iPhone 6+
@media only screen and (min-device-width : 414px) {
    // styles go here
}

The other theory is to make it fully scalable at any size regardless of what the device is. The upside to this is that you can insure that your design looks great on all devices. The downside is that it makes your code a bit more bloated. the breakpoints here would be wherever you need them. I personally use this method but start with break points at 1200 and go to 1100, 1000, as needed. If I'm going mobile first I'll start with 320, 350, 400, 500, etc...

When using my android smartphone with Google chrome, the width of the
page is about 400px, even thought the real resolution is full hd,
1080px width. Does this depends form the browser, or what?

The device width has many factors to it. But the device width is basically the number of pixels across that the browser is displaying. There's a little more to it than this, but your best bet is to Google device widths.

I saw that someone uses the em mesure to set the breakpoint, is this
more accurate?

Nope. It's just a way of subdividing from a parent element. Until you have more time to research this, stick with pixels.

Finally, after having read lots of different informations, can you
please tell me which is the moste effective way, the best media query
to catch if the client is mobile or not? Thank you.

The best way to do this is to determine your break points. You cannot target mobile browsers specifically using CSS. You can only target the attributes of those browsers (width, height, orientation) so you can know that iPhone6's are 375 pixels across in portrait. So you can target them using that width. As Allan said, you can target devices with Javascript or server side libraries and add classes that way. But IMO it's better to stick with device widths and save those for situations where you're absolutely stuck.

What are the best CSS Media Queries to act as a catch-all for the most common types of devices?

In retrospect, I admit that this question I asked is broad as well as a bit vague. This is partly due to me not keeping up-to-date with the latest trends in front-end design, as well as a misunderstanding and misconceptions of the art and science around responsive web design.

However, I argue that this question should remain (if not on Stack Overflow, at least on somewhere more relevant on the Stack Exchange network), as the comments I have received have helped me a lot to better understand the fundamentals of how to actually implement a responsive design, and could also be beneficial to others in a similar situation.

Although there is no black-and-white answer to my question, thanks to those who have commented, I think that the best guidelines for responsive web design in general, are to:

• focus on the project specifics
• design with the content itself in mind

(Both points suggested in the comments by CBroe.)

I have also found the following articles helpful:

• Justin Avery: “Why you don’t need device specific breakpoints”
• Google Developers: “How to choose breakpoints”
• Nick La: “Setting Breakpoints in Responsive Design”

I also think that these articles from A List Apart, although published in 2000 and 2010 respectively, are excellent resources – both help you to understand the fundamental philosophy behind responsive web design:

• John Allsopp: “A Dao of Web Design” (2000)
• Ethan Marcotte: “Responsive Web Design” (2010)

How to use media queries in an effective way?

You have the correct approach when it comes to making a design and thinking mobile first. Now what you need to do is think of how it will be when you resize it to large device widths.

There are a lot of things you can look into, many people could suggest you to look at frameworks such as Bootstrap just to understand how they use media queries to achieve many things. My advice is to use as little media queries as you can. Try to support at least two device widths: mobile/tablets and desktop. Since mobile/desktop can be interchangeable and new devices are always coming out, a consistent design is best. However you can safely support mobile/tablet/desktop if you take the time to do so properly.

Now, I will try to keep it very simple for you and introduce the most basic way to do media queries right and expand from there.

Let's begin with the most important yet simplest building block of responsive web design: a container element. This container element is to be used for the content in your website, the content is for you to choose to imagine upon, since these containers will need to expand from device width to device with accordingly.

Navigation bar example:

.navigation-bar-container {
    position: relative;
    width: 100%;
    min-width: 320px;
    max-width: 100%;
    height: 100px;
}

Check the above code its so simple and straight forward, what does it do? I can imagine it will hold all the elements within a navigation bar. It can certainly be used in more than just that way, but for now all we care about its a navigation bar.

It's minimum width is 320px, because the smallest screen you need to support may be 320px wide (iPhone anyone) so there is no need to shrink your element below that.

Max width is interesting. Currently the nav bar's max width is 100% because I said it is... no, that does not make any sense. Why is it 100%? It is because I want to make it always expand to the full width of the screen, regardless of the screen width. That is it's default behavior.

Now try and think of what will happen to your navigation bar's width when you are in a different screen sizes, such as mobile devices. What will happen with the elements, will they shrink with your container? Will they even fit when the screen size is too small? Enter media queries.

• Full desktop widths: approximately 769px or above... this is subject to change of course.

The max width is 100% and width 100% means it will adjust to whatever the screen size is. Default behavior doing its thing, yes!

• Tablets: approximately 421px to 768px... this is subject to change of course

If your elements will not fit into all tablet sizes and make your navigation bar look weird, yes try it throw some divs and stuff in it and shrink it, then what do we do? It is time to make them fit by using the good old media queries:

@media screen and (max-width: 768px) {
    .navigation-bar-container { 
        display: none;
    }

    .sliding-navbar-container {
        display: block;
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
        width: 320px;
    }
}

Yes I did not make them fit at all. I swapped the good old navigation-bar-container width a different one. Classic example of what is good and safe when using media queries. Instead of breaking your head over how to fit these elements, spare no hesitation my friend, just swap your navigation bar for another that will work on smaller devices in there.

Note how the new navigation bar actually accounts for its width 320px, it will sit absolutely positioned to the top and left of the screen, doing a good job there. How to make it slide in and out, pop up, look neat is another question entirely! Don't ask unless you are curious... back to media queries!

However if we are speaking of an element which will change, let's say it always occupies 100 percent of your screen width, and then shrink to occupy half of the screen width for tablet/landscape phone devices only, then you may want to use a media query like so:

@media screen and (min-width: 421px) and (max-width: 768px) {
    max-width: 50%;
}

Very small and simple change. Max width is interesting because it controls your inner width, which is by default set to 100%. This change will force your element to adjust to 50% of the screen width while still resizing to adjust to 100% of the new element width. It could also be a good idea to make it max-width: 50vw since it will adjust to the viewport width instead, thus making it responsive even when dealing with widely different viewports.

And so, we come to our conclusion TLDR:

• Use as little media query sizes as you need, because if you need a lot then you are doing it wrong, seriously!
• If you need a lot, cannot avoid it, then get to know Bootstrap, let other people worry about the media query nightmares.
• Think in containers, your elements will sit and move around in them. Think of how these containers will flow from desktop to mobile and vice versa. Putting thought behind this is crucial as it is the source of your responsive behavior and should be the focus of your media queries.
• Although not covered here, you can easily look at media queries and font/image examples. Responsive fonts and images are a crucial part of your content and they as such should be accounted for with media queries. Background image changes, better readability depending on the device you are on, all of that matters and can be simplified via media queries.
• I put this last here because IT MATTERS A LOT use SASS/SCSS and save yourself a ton of trouble when working with media queries (and everything CSS). Look into mixins, variables, partials which you can use along media queries. You will love it if you didn't know about it and start using it now.
• Need more? Fine enjoy Google's responsive web design fundamentals

Good luck!!!

---

Related Topics