Question

I’m not a designer but just know enough to tweak around with css.

I need to implement media queries on top of existing css design for a project to adapt it for mobile devices like iphone, android etc. etc.

How much time it may take me to know enough to add media queries support to the existing design?

Please don’t close the question, it’s a specific answer that i’m seeking as it would potentially save me wasting time on learning something that may not solve my purpose at the moment.

Answer 1

Yes, you can. There really isn’t much to learn about media queries.

1. They let you say “apply this CSS if the browser meets these criteria (and supports media queries)”.

   So, you can apply some CSS to devices with a device-width no greater than 480 pixels using the media query in this question: How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?

2. Many media queries (e.g. width) can take a prefix of max- or min- to allow less than/greater than queries. So, max-width: 480px means “browsers with a width of 480 pixels or less” (and not “browsers with a maximum width of 480 pixels”).

3. You can use them in the media attribute of the <link> element to conditionally load an entire stylesheet, or via the @media at-rule within a stylesheet to conditionally apply a block of CSS.

4. All built-in iPhone and Android browsers support them, so they’re a good way to supply different styles to mobile devices. (You can also add them to your regular stylesheets to prevent mobile browsers from applying the regular stylesheets, if that’s appropriate for your project.)

The Media Queries spec is here, and pretty readable:

• http://www.w3.org/TR/css3-mediaqueries/

Most of your work will be actually adapting the site’s design to mobile devices, rather than figuring out which media query to use.